HTML table last td to take remaining width

Question

I have a table with one TR and 2 TD's. I want the first TD to adjust width automatically depending on its content, and the second TD to use up the remainder of the width.

This is what I have:

 <table style="width: 100%;"> <tr> <td>short content</td> <td>long content</td> </tr> </table> 

The entire table width is 100% (as I want it), but I don't know how to adjust the TD widths to achieve my goal.

Answer 1

You can give the first td a small width, eg 1px , with white-space: nowrap;

 table { width: 100%; border-collapse: collapse; } td { border: 1px solid red; } td:first-child { width: 1px; white-space: nowrap; } 

 <table> <tr> <td>short content</td> <td>long content</td> </tr> </table> 

Or, give the last td a large width, eg 100% .

 table { width: 100%; border-collapse: collapse; } td { border: 1px solid red; } td:first-child { white-space: nowrap; } td:last-child { width: 100%; } 

 <table> <tr> <td>short content</td> <td>long content</td> </tr> </table> 

Answer 2

Setting white-space: nowrap on all cells except for the last one, and giving the last one 100% width, worked for me:

    td:not(:last-child), th:not(:last-child) {
      white-space: nowrap;
    }

    td:last-child, th:last-child {
      width: 100%;
    }

This will make sure that text wrapping still works while still filling the table when space is available.