Search code examples
htmlcsshtml-tablecss-tables

How to CSS my table so that the most right column stuck to the right, with variable width

I have a 100% width table of which I want the right most column (D) to take only the minimum required width, but still stuck to the right with the other columns (B, C) fill up the rest of the space. (A is fixed width).

How can I do this with CSS?

table example

Solution

  • Use this code:

    table td:first-child { width: 50px; }
table td:last-child { width: 1px; white-space: nowrap; }

    This takes advantage of the standard cell behaviour of being at least as wide as the non-wrappable content.