When a table is enclosed within a div element that has a specified width and overflow is enabled, the td width setting

I'm facing an issue with setting the width of the td element in the following HTML code.

In this setup, a table is enclosed within a div element with a width of 200px and overflow-x property defined.

<div class="scroll" style="width: 200px; overflow-x: overlay;">

<table class="scrollable">
<tbody>
<tr>
    <td width="100" data-index="0" style="width: 118px;">-0.29%</td>
    <td data-index="1">-0.26%</td>
    <td data-index="2">-0.20%</td><td data-index="3">-0.15%</td>
    <td data-index="4">-0.09%</td><td data-index="5">0.19%</td>
    <td data-index="6">0.54%</td><td data-index="7">0.95%</td>
    <td data-index="8">1.33%</td><td data-index="9">1.67%</td>
    <td data-index="10">1.97%</td><td data-index="11">2.22%</td>
    <td data-index="12">2.44%</td><td data-index="13">2.62%</td>
    <td data-index="14">2.78%</td>
</tr>
</tbody>
</table>
</div>

htmlcss

Answer №1

Consider updating the display property of <td> to display:inline-block. Additionally, include table { width: max-content; } in your CSS to ensure that your table can accommodate the larger <td> elements.

table {
  width: max-content;
}

td {
  width: 100px;
  display: inline-block;
}
<div class="scroll" style="
    width: 200px;
    overflow-x: auto;
">
  <table class="scrollable">
    <tbody>
      <tr>
        <td data-index="0">-0.29%</td>
        <td data-index="1">-0.26%</td>
        <td data-index="2">-0.20%</td>
        <td data-index="3">-0.15%</td>
        <td data-index="4">-0.09%</td>
        <td data-index="5">0.19%</td>
        <td data-index="6">0.54%</td>
        <td data-index="7">0.95%</td>
        <td data-index="8">1.33%</td>
        <td data-index="9">1.67%</td>
        <td data-index="10">1.97%</td>
        <td data-index="11">2.22%</td>
        <td data-index="12">2.44%</td>
        <td data-index="13">2.62%</td>
        <td data-index="14">2.78%</td>
      </tr>
    </tbody>
  </table>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discover additional and subtract options

I am trying to implement a "See more" and "See less" button functionality for my list items inside an unordered list using the code below, but it is not working as intended. $(document).ready(function() { var list = $(".partners__ul li"); var numTo ...

javascriptjqueryhtml

Is there a way to conceal the contents of a page until all the images have finished loading?

I'm currently working on improving the performance of a website that is loading very slowly. I have already reorganized, compressed and minified the JavaScript and CSS files, but the main issue seems to be with the images. The site contains large imag ...

javascripthtml

Encountering a connection issue: SMTP connect() failure when using PHPmailer with reCaptcha on a CentOS server

My company is looking to set up a website on a CentOS server that includes a contact form with captcha. I came across PHPMailer and got the code working on my local machine, but when trying to send emails on CentOS, I encountered an error saying "SMTP conn ...

phphtmlphpmailerrecaptcha

Choose all elements following the first child element

My goal is to create a LESS rule that targets every element following the current element, excluding the first child. I've tried using this syntax: (& ~ *):not(:first-child) { margin-left: 5px; } and also this one: & ~ *:not(:first-child ...

csscss-selectorsless

Modifying an HTML list item to become 'active' in a navigation bar

One way I've been implementing my navbar on each page is by using the following code at the bottom of the page within script tags: $("#navbar-partial").load("navbar.html). The code for the navbar list looks like this: <ul id="main-nav" class="nav ...

javascriptjqueryhtmlcsstwitter-bootstrap

JavaScript: Modifying the Style of a :lang Selector

Currently, I am working on creating a basic multilingual static website using only HTML5, CSS3, and vanilla JavaScript. The structure of the HTML looks something like this: <html> <head> <title>WEBSITE</title> ...

javascripthtmlcss

Relocate the preview division below the button in the Kartik File Input Widget

There are two input file buttons that allow users to upload an image on each button. Upon selecting an image, a preview of the image will be displayed above the button. The current layout is shown here: https://i.sstatic.net/aLAbo.png When images of diff ...

javascriptjquerycssfile-uploadwidget

Prevent click event from bubbling up in React and DOM event mix situations

We are offering a menu here. In case the menu is visible, users should be able to close it by clicking anywhere on the screen: class Menu extends Component { componentWillMount() { document.addEventListener("click", this.handleClickOutside) ...

cssreactjsreact-redux

Alter the class following modifications to the list

https://i.stack.imgur.com/QZob0.pngIn my dual list, the data is displayed in a ul li format fetched from a JSON file. Users can move items between the two lists. However, I am facing an issue where I want to apply a property that only displays content with ...

javascriptjqueryhtmlcssajax

An error occurs in the console stating 'Maximum call stack size exceeded' when trying to add data to the database using JavaScript

I've been struggling with a JavaScript error for the past few days and despite scouring through numerous answers on StackOverFlow, none seem to address my specific issue. My goal is to simply submit a record to the database using a combination of Jav ...

javascripthtmljquery

Using jQuery to create a div that animates when scrolling

Recently, I came across this interesting code snippet: $(document).ready(function(){ $(window).scroll(function(){ if($("#1").offset().top < $(window).scrollTop()); $("#1").animate({"color":"#efbe5c","font-size":"52pt", "top":"0", "position":"fix ...

jquerycss

Trouble with Chrome's CSS making table cell display as block

After searching, I stumbled upon this question that appeared to have the solution I needed. Surprisingly, even when using chrome 32.0.1700.102, the fiddle provided in the first answer worked perfectly for me. However, when I copied the HTML code into a ne ...

htmlcssgoogle-chrome

Issues with rendering components using ReactJS are causing problems with <p/> and <br/> tags not functioning as expected

I am having trouble using <p/> or <br/> tags to create new lines after a custom ReactJS component that includes Bootstrap CSS with <div className="col-sm-10">. var MyChatClientView = React.createClass({ render: function() { retur ...

htmltwitter-bootstrap-3reactjs

Bulma table rows not extending to the complete width

In my angular7 app, I have implemented a is-fullwidth Bulma table that is functioning correctly. However, I now need to incorporate an angular component within each row, with the td tags contained in that component. The issue arises when I do this, as the ...

cssangularbulma

Error message encountered in Python: AttributeError stating that the 'List' object does not possess the attribute 'click'. This error occurred while using Selenium. (Image attached for reference)

Help needed! I am struggling to select an item within the table cell. Below is the source code: <div class="clear formrow top_border"> <div> <table class="infoGrid" cellspacing="0" cellpadding="0" border="0" id="ctl00_cphMain_gd ...

pythonhtmlcssseleniumselenium-webdriver

How can you convert an epoch datetime value from a textbox into a human-readable 24-hour date format

I have an initial textbox that displays an epoch datetime stamp. Since this format is not easily readable by humans, I made it hidden and readonly. Now, I want to take the epoch value from the first textbox and convert it into a 24-hour human-readable da ...

javascripthtmldatetimemomentjsepoch

securely load HTML form with data stored in MySQL

I have developed a basic HTML/JS math form for performing calculations. To simplify the form, I made it more concise for clarity: function output(){ var value1 = document.getElementById('value1').value; var ...

javascripthtmlmysql

Display of div content when hovering over table

I am currently developing a simple interactive calendar, and I need some guidance on how to make it more dynamic. Initially, I want only the months to display, but upon hovering over a month, I would like all the individual days to appear. Eventually, user ...

javascriptjqueryhtmlcss

What are the steps for implementing two Li elements in HTML with distinct attributes?

Usage I decided to utilize li elements in various ways on a single web page. I used them as part of a navbar at one point and then later repurposed them for an image grid. Issue The problem arises when the dropdown menu within the navbar is partially hid ...

htmlcss

What is the best way to print a specific window only?

I have a webpage that displays the purchase history of sales https://i.sstatic.net/wCNv1.png When I click to view full details, this is what I see https://i.sstatic.net/D5qBl.png The issue arises when I try to print the full details, as I only want to ...

phphtml