Question

I have a table with two columns and one row, and 100% width across the screen. I want the first column to take up as much space as the content in it will fill. This content shouldn’t take up the entire screen, so I’m not worried about wrapping. I then want the second cell to take up the remainder of the horizontal space.

How would I go about setting up this table? I’ve tried many different combinations of setting the widths on the two cells to no avail.

Answer 1

Setup your CSS as follows:

table {
  width: 100%;
}

td.firstCol {
  width: 1%;
  white-space: nowrap;
}

And your table markup like so:

<table>
  <tr>
    <td class="firstCol">
      First column content
    </td>
    <td>
      Second column content
    </td>
  </tr>
</table>

And that should do the trick.