Search code examples
csscss-tables

Make the last cell of a table row eat all the white space

When you make a table 100% wide, the default behavior is to proportionally distribute the width of each cell, so that cells with more text are wider, and cells with less text are narrower.

I want my table to fill the width of the screen, but the cells within should align to the left, as if I hadn't specified a table width. In other words:

enter image description here

How can I get that nice white space to the right of my table cells while keeping the overall table 100% wide?

Solution

  • This css should take care of it:

    th:last-child, td:last-child {width:100%;}

    However, that's going to try to squish all the other cells leftward. So you might want to add this for a consistent height in the column headings:

    thead {white-space:nowrap;}