Html - Make Table Width 100% With Last Column Filling Remainder ...

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>