Search code examples
csswidthcellhtml-table

HTML/CSS Table, how do I increase width of table without affecting width of cells?

I have a table whose width is 80% of screensize. This table contains my menu items. Menu items are in the form of table cells. The design I want is that each cell should only be as wide as the text inside it. But I also want a last cell, that will be empty and be as wide as the remaining space in the table. I.E I want the last to inherit the width of the table (remaining space).

But, all the cells get stretched when I increase table width instead of them just fitting to their text.

How do I stop this from happening?

  1. I want all but last of the cells to exactly fit their text.
  2. I want the last cell to take up all the remaining space.

Thanks!

Solution

  • Extend the last cell to occupy full width:

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

    …and, if you want to make sure the text in the other cells doesn't collapse:

    td {
    whitespace: nowrap;
}

    Demo here:

    http://jsfiddle.net/barney/kz77m/