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

Question

我有一个包含两列和一行的表格，屏幕宽度为 100%。我希望第一列占用的空间与其中的内容填充的空间一样多。此内容不应占据整个屏幕，因此我不担心换行。然后我希望第二个单元格占据剩余的水平空间。

我将如何设置这张 table ？我尝试了很多不同的组合来设置两个单元格的宽度，但均无济于事。

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>

这应该可以解决问题。