1

I'm using calc to specify the width of a table's cells. This works in Chrome, but no other browsers.

Caniuse doesn't mention any issues relating to calc in other browsers.

HTML:

<table>
  <thead>
    <tr>
      <th class="first">One</th>
      <th class="second">Two</th>
      <th class="third">Three</th>
      <th class="fourth">Four</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="first"></td>
      <td class="second"></td>
      <td class="third"></td>
      <td class="fourth"></td>
    </tr>
  </tbody>
</table>

CSS (though I'm using Sass):

table {
    width: 1200px;
    margin: 20px auto 0;
    table-layout: fixed;
}

th:nth-child(2n) {
    background: grey;
}

th.first {
    width: calc(100% * 0.1);
}

th.second {
    width: calc(100% * 0.4);
}

th.third {
    width: calc(100% * 0.25);
}

th.fourth {
    width: calc(100% * 0.25);
}

As you can see, IE11 resolves all cells to the same width:

enter image description here

There is a CodePen here.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Undistraction
  • 42,754
  • 56
  • 195
  • 331
  • This has nothing to do with Sass. Unless this is a problem related to the Sass -> CSS compilation problem, only the compiled CSS should be provided. – cimmanon Mar 24 '15 at 15:12
  • ...and why use calc anyway since you're multiplying by 100%? – Paulie_D Mar 24 '15 at 15:16
  • 1
    @Paulie_D This is a much simplified version. The 100% is just for ease of example. – Undistraction Mar 24 '15 at 15:43
  • I can't reproduce the error you're talking about in IE11. It calculates the widths just fine for me. – TylerH Mar 24 '15 at 16:09
  • @TylerH It calculates all widths as being 25% (see screenshot added to the question) which is not correct. Compare to Chrome for example where each cell has a width derived from its `calc` calculation. – Undistraction Mar 24 '15 at 16:53
  • 1
    @Pedr Seems Chrome is the only one who does it differently. Firefox, Safari, and IE11 all handle it the same way. – TylerH Mar 24 '15 at 17:47
  • 2
    http://stackoverflow.com/questions/15873302/using-calc-with-tables It seems like it has to do with how table column widths are calculated http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4.4 tl;dr You can't use `calc()` with tables. – TylerH Mar 24 '15 at 18:43
  • @TylerH Thanks. It does seem to be the case that calc is non-functional when used in tables. – Undistraction Mar 24 '15 at 20:17

0 Answers0