user3173098 user3173098 - 5 months ago 20
CSS Question

HTML table last td to take remaining width

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

You can give the first td a small width, e.g. 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, e.g. 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>

Comments