How to set the table cell widths to the minimum except for the last column with CSS?

Sometimes, we want to set the table cell widths to the minimum except for the last column with CSS.

In this article, we’ll look at how to set the table cell widths to the minimum except for the last column with CSS.

How to set the table cell widths to the minimum except for the last column with CSS?

To set the table cell widths to the minimum except for the last column with CSS, we can apply a class to the last td in each tr element.

For instance, we write

<table>
  <tr>
    <td class="shrink">element1</td>
    <td class="shrink">data</td>
    <td class="shrink">junk here</td>
    <td class="expand">last column</td>
  </tr>
  <tr>
    <td class="shrink">element1</td>
    <td class="shrink">data</td>
    <td class="shrink">junk here</td>
    <td class="expand">last column</td>
  </tr>
  <tr>
    <td class="shrink">element1</td>
    <td class="shrink">data</td>
    <td class="shrink">junk here</td>
    <td class="expand">last column</td>
  </tr>
</table>

to add a table

Then we write

table {
  border: 1px solid green;
  border-collapse: collapse;
  width: 100%;
}

table td {
  border: 1px solid green;
}

table td.shrink {
  white-space: nowrap;
}

table td.expand {
  width: 99%;
}

to make the td with the expand class have width 99% to make it fill 99% of the width of the row.

Conclusion

To set the table cell widths to the minimum except for the last column with CSS, we can apply a class to the last td in each tr element.