有第二个Html表格单元跨越屏幕的其余部分

Question

我有一个包含两列和一行的表格，屏幕上有100％的宽度。我希望第一列占用尽可能多的空间，因为它将填充内容。这个内容不应占用整个屏幕，所以我不担心包装。然后我希望第二个单元格占据水平空间的剩余部分。

我如何设置此表？我已经尝试了许多不同的组合来设置两个单元格的宽度无济于事。

Answer 1

按如下方式设置CSS：

table {
  width: 100%;
}

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

你的表格标记如下：

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

这应该可以解决问题。