Have first column in HTML table flexible when table width=100%

Question

I have an HTML table with 8 columns and multiple rows. The contents of each cell is generated dynamically and it is hard to predict the width of any column. I set table width=100% as I would like the table to take up the entire width of the div. I would like columns 2 through 8 to stay the same as width as if I did not set a table width. Then I would like for the first column to expand its width so that the table width becomes 100%. Is this possible?

Answer 1

Set a width on the table and on all the other columns; the remaining column will take up all the slack.

The trick is to use table-layout: fixed style so that the auto-layout guessing algorithm (and IE's particularly poor interpretation of it) doesn't step in and mess it up when there are larger than expected amounts of content in one column.

In fixed layout mode, the first row of cells or <col> elements sets the width; further rows do not affect widths. This makes rendering faster; you should used fixed layout for every table you can.

<table>
    <col class="name" /><col class="data" /><col class="data" /><col class="data" />
    <col class="data" /><col class="data" /><col class="data" /><col class="data" />
    <tr>
        <td>tiddle om pom pom</td>
        <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
    </tr>
</table>

table { width: 100%; table-layout: fixed; }
col.data { width: 2em; }