CSS calc not working for width

Question

I'd like Cell A to leave exactly 100px for the remain two cells. I would think calc(100% - 100px) would be sufficient as this works just fine in many other situations. Why isn't it working here?

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #555;
  font-family: sans-serif;
  table-layout: fixed;
}

td {
  padding: 10px;
  box-sizing: border-box;
  text-align: center
}

td+td {
  border-left: 1px solid #555;
}

td:first-child {
  width: calc(100% - 100px);
}

<table>
  <tbody>
    <tr>
      <td>Cell A</td>
      <td>Cell B</td>
      <td>Cell C</td>
    </tr>
  </tbody>
</table>

Check this, https://stackoverflow.com/questions/39637941/using-calc-in-table — Casper, Dec 07 '17 at 03:06
@CasperSL - nope. Setting `table-layout: fixed` (as per the accepted answer there) does not work. I've updated the snippet here to demonstrate. — But those new buttons though.., Dec 07 '17 at 03:08
Read this one also, https://stackoverflow.com/questions/15873302/using-calc-with-tables?noredirect=1&lq=1 — Casper, Dec 07 '17 at 03:17
yes, i read all of these questions before i posted. I you look at my snippet you'll see all of the suggestions there are already present. if you have an answer please post. — But those new buttons though.., Dec 07 '17 at 03:23
So is this supposed to work with a unknown number of columns? If you will know the number of columns, doing it in reverse by setting the last two columns to 50px wide each works. — cjl750, Dec 07 '17 at 05:00
@cjl750 - Thanks but that's not what I'm after. I want to know why it doesn't work. That is the question I am asking. Also, setting two columns to 50px each is not the same as leaving 100px and letting them set their own width based on content which is something tables excel at. — But those new buttons though.., Dec 07 '17 at 05:20
No worries. I am curious about it too; never really tried to do something like this with a table before so never realized it was a problem. FWIW you can achieve the desired result with flexbox instead of a table. Probably have to dig into the spec to see what it says about `display: table-cell` to get to the why. — cjl750, Dec 07 '17 at 05:33

Robby Cornelissen · Answer 1 · 2020-04-01T09:28:22.903

1

At least in Chrome, it seems to work when defining the width on a colgroup element:

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #555;
  font-family: sans-serif;
  table-layout: fixed;
}

td {
  padding: 10px;
  box-sizing: border-box;
  text-align: center
}

td+td {
  border-left: 1px solid #555;
}

colgroup:first-child {
  width: calc(100% - 100px);
}

<table>
  <colgroup/>
  <colgroup span="2" />
  <tbody>
    <tr>
      <td>Cell A</td>
      <td>Cell B</td>
      <td>Cell C</td>
    </tr>
  </tbody>
</table>

Update April 1st, 2020

This no longer seems to work in the current version of Chrome. I'll leave the answer to serve as a test case should the behavior change in the future.

edited Apr 01 '20 at 09:28

answered Dec 07 '17 at 03:33

Robby Cornelissen

91,784
22
134
156

interesting - I do see it working in chrome, but not firefox. – But those new buttons though.. Dec 07 '17 at 03:36
Yeah, same here. Trying out a couple of alternatives, but no luck so far. – Robby Cornelissen Dec 07 '17 at 03:37

score -3 · Answer 2 · answered Dec 07 '17 at 04:56

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #555;
  font-family: sans-serif;
  table-layout: fixed;
}

td {
  padding: 10px;
  box-sizing: border-box;
  text-align: center
}

td+td {
  border-left: 1px solid #555;
}

td:first-child{
  width: calc(100% / 6 * 3.5);
}

<table>
  <tbody>
    <tr>
      <td>Cell A</td>
      <td>Cell B</td>
      <td>Cell C</td>
    </tr>
  </tbody>
</table>

CSS calc not working for width

2 Answers2

Linked