html - 让第二个 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>

这应该可以解决问题。