Why Is Box-Sizing Acting Different on Table Vs Div

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 redeclaring box-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 to border-box; changing it to content-box causes it to behave like the second div.

  • Firefox

    -moz-box-sizing is set to border-box; changing it to content-box or padding-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 ex­tremely 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 ele­ments
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 to display: 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



Leave a reply



Submit