CSS calc not working in HTML table

Question

I'm trying to create HTML table with last column wider then the others. I get the expected behavior using padding-right.

table {
  border-collapse: collapse;
  width: 80%
}
td,
th {
  border: 1px solid black;
}
td:last-child,
th:last-child {
  padding-right: 30px;
}

Expected behaviour using <i>padding-right</i>
<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 2</td>
      <td>Row 3</td>
      <td>Row 4</td>
    </tr>
    <tr>
      <td>Row 1</td>
      <td>Row 2</td>
      <td>Row 3</td>
      <td>Row 4</td>
    </tr>
  </tbody>
</table>

Now my question is how can I get the same behavior using CSS calc? Here is an example how I wanted to achieved it and JSFiddle with both examples.

table {
  border-collapse: collapse;
  width: 80%
}
td,
th {
  border: 1px solid black;
  width: calc((100% - 30px) / 4);
}
td:last-child,
th:last-child {
  width: calc((100% - 30px) / 4 + 30px);
}

Hopefully the same behaviour as above using <i>calc</i>
<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 2</td>
      <td>Row 3</td>
      <td>Row 4</td>
    </tr>
    <tr>
      <td>Row 1</td>
      <td>Row 2</td>
      <td>Row 3</td>
      <td>Row 4</td>
    </tr>
  </tbody>
</table>

Why do you have 2 separate property lists for the td and th elements? — Bálint, Sep 23 '16 at 07:55
@markoffden I don't want other solution. I already made with `padding-right`. I want to understand why calc is not working. — Paweł Adamski, Sep 23 '16 at 07:59
I think the problem is with 100% in your calc function. You expect 100% to return the table's width, but is returning something else (maybe the tr's width). — andreini, Sep 23 '16 at 08:02
You say this is the difference between using _calc_ or not, but the code examples show the difference between _padding_ and _width_ in table cells. — Mr Lister, Sep 23 '16 at 08:14

CSS calc not working in HTML table

0 Answers0