Why is box-sizing acting different on table vs div?
Yes, CSS2.1 states the following for tables with the separated borders model:
However, in HTML and XHTML1, the width of the <table> element is the distance from the left border edge to the right border edge.
Note: In CSS3 this peculiar requirement will be defined in terms of UA style sheet rules and the 'box-sizing' property.
The current CSS3 definition of box-sizing
does not say anything about this, but translating the above quote it basically means in (X)HTML, tables use the border-box model: padding and borders do not add to the specified width of a table.
Note that in terms of the box-sizing
property, different browsers seem to handle this special case differently:
Chrome
box-sizing
is set to the initial value,content-box
; changing it has no effect whatsoever. Neither does redeclaringbox-sizing: content-box
within the inline styles, but that should be expected. Either way, Chrome appears to be forcing the table to always use the border-box model.IE
box-sizing
is set toborder-box
; changing it tocontent-box
causes it to behave like the seconddiv
.Firefox
-moz-box-sizing
is set toborder-box
; changing it tocontent-box
orpadding-box
causes it to resize accordingly.
Since CSS3 does not yet make any mention of table box sizing, this should not come as a surprise. At the very least, the result is the same — it's only the underlying implementation that's different. But given what the note says above, I would say that IE and Firefox are closer to the intended CSS3 definition, since in Chrome you can't seem to change a table's box model using the box-sizing
property.
Tables with the collapsing border model don't have padding at all, although in this case it's not relevant since your table does not use this model:
Note that in this model, the width of the table includes half the table border. Also, in this model, a table does not have padding (but does have margins).
Google Chrome CSS box model issue: box-sizing + table + 100% height + border
The problem is because you are using box-sizing
in the div
. Keep in mind that box-sizing
is experimental technology. One solution i find* is to use box-sizing: border-box;webkit-box-sizing: content-box;
and remove it from the inline style in div(also please try to avoid inline styles):
div {
box-sizing: border-box;
-webkit-box-sizing: content-box;
}
fiddle
Reference
MDN box-sizing
*with @BoltClock's help :)
Inconsistent behavior of display: table and display: table-cell in different browsers
From Everything You Know About CSS Is Wrong :
CSS tables happily abide by the normal rules of table layout, which
enables an extremely powerful feature of CSS table layouts: missing
table elements are created anonymously by the browser. The CSS2.1
specification states:Document languages other than HTML may not contain all the elements
in the CSS 2.1 table model. In these cases, the “missing” elements
must be assumed in order for the table model to work. Any table
element will automatically generate necessary anonymous table objects
around itself, consisting of at least three nested objects
corresponding to a “table”/“inline-table” element, a “table-row”
element, and a “table-cell” element.
What this means is that if we use
display: table-cell;
without first
containing the cell in a block set todisplay: table-row;
, the row
will be implied—the browser will act as though the declared row is
actually there.
So, the specs explicitly allow the use of display: table-cell;
or display: table;
and define how elements should behave in that case.
It remains unclear to me what's the expected behavior in each of these cases, but it does appears that we're dealing with bugs, and that at least Chrome is working on fixing them.
I gave Oriol the bounty for this answer because it's the only answer I've had thusfar that actually addressed the points I raised and offered some valuable information.
box-sizing: border-box not working in Chrome/Edge Chromium
I think I figured it out: the problem is not border-box
but min-width
related as most browser (still) seem to poorly implement it for table-cells.
Check the MDN: min-width - Browser compatibility notes. With Firefox (and Opera) it says: CSS 2.1 leaves the behavior of min-width with table undefined. Firefox supports applying min-width to table elements.. Probably as-in 'while other browsers do not'.
Hence the difference your are experiencing with Firefox and Chrome/Edge.
To me this means that you will have to workaround the problem with min-width
to get some cross-browser compatibility.
If at all possible for you, I would say: remove the top <table>
and move its <tr>
to the bottom <table>
and use the good old inline colspan
, circumventing the problem...
Like below snippet (make sure you contemplate the various comments in there! Esp. with .cell4
).
Tested on recent Chrome/Edge, IE11 and Firefox, W10.
/* Use this */
table,table * { box-sizing: border-box }
/* or use this for the entire page. Common practice... */
html { -webkit-box-sizing: border-box; box-sizing: border-box }
*, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit }
/* REMOVED all 'border-box' settings below for easier maintenance */
.vertical_separator {
border-left: 2px solid;
}
.cell-th2-3, /* ADDED */
.cell-th2-4 {
/* min-width: 3.6em; /* REMOVE */
text-align: center;
border-left: 2px solid;
border-right: 2px solid;
}
/* REMOVE entirely
.cell-th2-3 {
min-width: 2.7em;
text-align: center;
border-left: 2px solid;
border-right: 2px solid;
}
*/
.cell4 {
min-width: 0.9em;
/* problematic!!! Firefox: 14.4px Chrome/Edge 15px.
- Browser default font-size quirk?
- Browser internal rounding of border pixels?
*/
text-align: center;
}
.cell4:first-child {
border-left: 2px solid;
}
.cell4:last-child {
border-right: 2px solid;
}
table {
border-spacing: 0;
border-collapse: collapse;
table-layout: fixed;
}
td {
padding: 0;
border: 1px solid;
overflow: hidden;
}
tr {
white-space: nowrap;
height: 1.5em;
}
<table>
<tr>
<td class="cell-th2-4" colspan="4"></td>
<td class="cell-th2-4" colspan="4"></td>
<td class="cell-th2-3" colspan="3"></td>
</tr>
<tr>
<td class="cell4"></td>
<td class="cell4"></td>
<td class="cell4"></td>
<td class="cell4"></td>
<td class="cell4 vertical_separator"></td>
<td class="cell4"></td>
<td class="cell4"></td>
<td class="cell4"></td>
<td class="cell4 vertical_separator"></td>
<td class="cell4"></td>
<td class="cell4"></td>
</tr>
<tr>
<td class="cell4"></td>
<td class="cell4"></td>
<td class="cell4"></td>
<td class="cell4"></td>
<td class="cell4 vertical_separator"></td>
<td class="cell4"></td>
<td class="cell4"></td>
<td class="cell4"></td>
<td class="cell4 vertical_separator"></td>
<td class="cell4"></td>
<td class="cell4"></td>
</tr>
</table>
padding not behaving like I expect them to in a table row
Because tables with the collapsing border model don't have padding at all (reference).
Update - thanks @LGSon for mentioning that it won't work for IE - reference.
So, instead of targeting the tr
, target the first cell in each tr
:
.q-tr > td:first-child {
border-left: 2px solid transparent;
}
.q-tr:hover > td:first-child {
border-left: 2px solid #35ccea;
}
Bootply
Table width goes beyond the div border
found the solution here:
http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/
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.What you want to use is
table-layout:fixed
. Bam! Now the table is as
wide as you have specified in the CSS. No more, no less. And to my
great surprise this seems to be widely supported by browsers. The only
browser of any significance that does not support it is IE/Mac, and
the significance of that browser is rapidly approaching zero.Next is deciding what to do with the content that doesn’t fit in the
table anymore. If the table only contains text, word-wrap:break-word
(word-wrap is specified in the CSS3 Text Effects Module) will force
the browser to break words as necessary to prevent overflow.
Related Topics
Background Video with 100% Width and Fixed Height
<Div> into a <Tr>: Is It Correct
Fixed Body Background Scrolls with The Page on iOS7
Inline Style to Act as: Hover in CSS
2 Colors in One Placeholder of Input Field
Safari Anchors on Links Not Working
Multiple Submit Buttons on HTML Form - Designate One Button as Default
How to Insert a Template into Another Template
<Strong> VS. Font-Weight:Bold & <Em> VS. Font-Style:Italic
Include HTML Files in R Markdown File
Meta Viewport Just on Portrait
How to Write Text on a HTML5 Canvas Element
How to Add The Text "On" and "Off" to Toggle Button
How to Load CSS Asynchronously
Bootstrap 3 - Show Collapsed Navigation for All Screen Sizes