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:

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?

Rene van der Lende · Accepted Answer

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

and move its to the bottom

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;
}

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

Answers (1)

Related Questions