Menu
In the example below, also available here, both WebKit (Safari 5, Chrome 10.0.648.205) and Mozilla (FF 4) keep DIV div around the visible width of the browser window, while the TABLE is as wide as its content.
I would expect the DIV to grow as wide as the TABLE, but since the behavior is consistent across browsers, I suspect this is a feature rather than a bug.
Interestingly, if the DIV is set to have float:left, it does grow as wide as the table.
Any explanations?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Wide Table</title>
<style>
#container {
background-color:blue;
/* float:left;*/
}
</style>
</head>
<body>
<div id="container">
<table >
<tr id="tr">
<td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
</tr>
</table>
</div>
</body>
</html>
853
The trick is to use the CSS property table-layout. It can take three values: auto , fixed , and inherit . The normal (initial) value is auto , which means that the table width is given by its columns and any borders. In other words, it expands if necessary.
Datatables tend to overflow on purpose, as the columns are too wide. You have two options: Remove columns to make it so it fits within the div element. Set overflow-y to scroll or auto in css on the containing div.
For the larger table, use the class table-som with the class table when using within the *table** tag, or use the class table-som. Cells can be made to have a half thickness. Within table-dark, define a combination of classes table, table-sm, and table-dark to narrow down the dark table to its smallest size.
To set the cell width and height, use the CSS style. The height and width attribute of the <td> cell isn't supported in HTML5. Use the CSS property width and height to set the width and height of the cell respectively.
Block elements take the width of their parent by default, not the width of their content; height on the other hand, works the other way around: block elements take the height of their content by default rather than the height of their parent. Things work this way because HTML/CSS is built around the usual top-to-bottom layout of English text.
So, your #container takes the width of <body> and then the <table> inside #container overflows outside #container. If you put overflow: hidden on #container you'll clip the <table>, overflow-x: auto; on #container will add a scrollbar.
UPDATE: As far as floating elements are concerned, the CSS3 spec has this to say:
The used value of ‘width’ is the computed value, unless that is ‘auto’, when used value is the shrink-to-fit width.
The default width will be auto so shrink-to-fit it is:
Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks.
There are no possible line breaks in your <table> so the floated #container will take on the entire width of its <table> child.
171
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
