This is what worked for me (in FireFox, Chrome and old 12.x Opera). My tables which I wanted to have 100% width and the last column to fill the rest has the class tableList and here’s CSS:
.tableList { width: 100%; }
.tableList td { width: 1px; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; } /* well, it's less than 100% in the end, but this still works for me */
Below, there’s a snippet to try:
.tableList { width: 100%; }
.tableList td { width: 1px; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; background-color: yellow; } /* well, it's less than 100% in the end, but this still works for me */<table class="tableList">
<tr><td>game's</td><td>not</td><td>over</td></tr>
<tr><td>one</td><td>two</td><td>three and more</td></tr>
</table>Like Rahat has noticed, if the content of a column other than the first one is more than one word, it becomes multiline (one line per word):
.tableList { width: 100%; }
.tableList td { width: 1px; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; background-color: yellow; } /* well, it's less than 100% in the end, but this still works for me */<table class="tableList">
<tr><td>game's</td><td>not</td><td>over</td></tr>
<tr><td>one</td><td>two plus plus</td><td>three and more</td></tr>
</table>but he also has suggested a workaround – adding white-space: nowrap:
.tableList { width: 100%; }
.tableList td { width: 1px; white-space: nowrap; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; background-color: yellow; } /* well, it's less than 100% in the end, but this still works for me */<table class="tableList">
<tr><td>game's</td><td>not</td><td>over</td></tr>
<tr><td>one</td><td>two plus plus</td><td>three and more</td></tr>
</table>