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

Question

Hi,

I have an HTML table with 8 columns and multple 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?

Thanks

Answer 1

Set explicit widths for 2 - 8 and Cell 1 will determine its own width with the remaining space. You could also set no-wrap for the whitespace in the first cell too so the contents don't wrap, but force the cell to grow when necessary.

Answer 2

I think your question is not complete, because read literally, the answer is don't set any column widths at all. Every column will take as much space as it will, and they will somehow distribute it amongst each other.

Can you clarify what you would like to achieve?

Answer 3

<div>
<table width="100%">
<tr>
<td width="100%"></td>  <- this is col 1
<td></td><td></td><td></td><td></td><td></td><td></td><td></td> <- cols 2-8
</tr>
</table>
</div>

by setting the first cell to 100%, it will force that cell to try to be as wide as possible, while still respecting the widths of the rest of the cells. If cells 2-8 contains text, you can add so the text inside those cells do not get wrapped due to the first cell's attempt to be 100% width.

Answer 4

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; }

Answer 5

Thanks bobince your solution worked a treat to a similar problem I was experiencing.