How to make the last cell of a row in a table occupy the entire remaining width

Question

In the HTML snippet below, how can I make the width of the column that contains "LAST" occupy the rest of the row, and the widths of the columns that contain "COLUMN ONE" and "COLUMN TWO" are wide enough to contain their contents and no more.

thank

table { border-collapse: collapse; } table td { border: 1px solid black; } 

 <table> <tr> <td> <table width="100%"> <tr> <td> <span> COLUMN </span> <span> ONE </span> </td> <td> COLUMN TWO </td> <td> LAST </td> </tr> </table> </td> </tr> <tr> <td> ANOTHER ROW </td> </tr> </table> 

Answer 1

You will need to specify the first two columns that should not be wrapped, and give the last column a width of 99%:

 <table width="100%"> <tr> <td style="white-space: nowrap;"> <span> COLUMN </span> <span> ONE </span> </td> <td style="white-space: nowrap;"> COLUMN TWO </td> <td width="99%"> LAST </td> </tr> </table> 

Edit: You should put all styles / presentations in (external ...) css.

Using classes for columns (instead of css3 selectors, such as nth-child() , if you focus only on modern browsers):

HTML:

 <tr> <td class="col1"> // etc 

CSS

 .col1, .col2 { white-space: nowrap; } .col3 { width: 99%; } 

Answer 2

There are probably better solutions using CSS, but what I did sets the width of the last column to about 95-100%

 <td> ONE </td> <td> TWO </td> <td width=100%> LAST </td>