box-sizing: border-box not working in Chrome/Edge Chromium

Question

I have a few tables (because they are warpped in vue components I can't put them in a single table) where the table cells need to be aligned while using various borders. On Firefox this works well using box-sizing: border-box but the same code on Chrome or Edge Chromium will be misaligned.

Here is my code:

<table>
  <tr>
    <td class="cell-th2-4"></td>
    <td class="cell-th2-4"></td>
    <td class="cell-th2-3"></td>
  </tr>
</table>
<table>
  <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>

And here is my css:

.vertical_separator {
  border-left: 2px solid;
}

.cell-th2-4 {
  min-width: 3.6em;
  text-align: center;
  box-sizing: border-box;
  border-left: 2px solid;
  border-right: 2px solid;
}

.cell-th2-3 {
  min-width: 2.7em;
  text-align: center;
  box-sizing: border-box;
  border-left: 2px solid;
  border-right: 2px solid;
}

.cell4 {
  min-width: 0.9em;
  text-align: center;
  box-sizing: border-box;
}

.cell4:first-child {
  border-left: 2px solid;
}

.cell4:last-child {
  border-right: 2px solid;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
  box-sizing: border-box;
}

td {
  padding: 0;
  border: 1px solid;
  overflow: hidden;
  box-sizing: border-box;
}

tr {
  white-space: nowrap;
  height: 1.5em;
  box-sizing: border-box;
}

Here is my JsFiddle - if you open it in Firefox it is well-aligned:

I opened in Chrome/Chromium Edge columns will be misaligned like so:

What can I do about that?

I don't see any difference when I use firefox and Chrome/Chromium Edge. Could you share a screenshot of the difference you have observed? — Tony, Jul 27 '20 at 15:05
I assume it is somehow related to border-collapsing. Maybe this answer be of use https://stackoverflow.com/questions/19068909/why-is-box-sizing-acting-different-on-table-vs-div — Sergiy T., Jul 27 '20 at 15:41
Hah, there's a difference in cell sizes too, but that may be due to my browsers default fontsize settings. Looking into this..... — Rene van der Lende, Jul 27 '20 at 15:53

Rene van der Lende · Accepted Answer · 2020-07-28T02:07:17.897

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>

colspan definitly is the way to go, thanks! To keep the component structure of my project, I need to stick with several tables though. I did that by introducing an 'invisible' dummy tr in each of the 'header tables'. Example here: https://jsfiddle.net/p2rwqf9m/ — Alexander Remesch, Jul 28 '20 at 02:44
@Alexander Remesch, cool that you have a solution. The new example Fiddle you posted unfortunately has the original code... — Rene van der Lende, Jul 28 '20 at 06:33
sorry, I've put the updated code here: https://jsfiddle.net/o3c8f2vt/ — Alexander Remesch, Jul 29 '20 at 16:12

box-sizing: border-box not working in Chrome/Edge Chromium

1 Answers1