使表格的第一列具有恒定的宽度，该宽度取决于列中的最大单元格宽度

Question

我似乎找不到在纯CSS中执行此操作的方法，我希望表的第一列具有恒定的宽度，该宽度取决于列中最大的单元格宽度。

示例：

| Hello | This is a sentence         |
| Foo   | This is a longer sentence  |

所以包含单元格Hello和Foo的第一列具有相同的宽度，但是由于其动态内容，我不想指定宽度。

Answer 1

您所描述的几乎是默认行为。默认情况下，列的宽度与其内容的大小匹配。如果要防止这些单元格中的自动换行，请设置white-space: nowrap;

Answer 2

要获得预期结果，请为表格，tr和td提供边框

默认情况下，td宽度会根据单元格内容进行调整

table tr td {
  border: 1px solid black;
}

<table>
  <tr>
    <td>Hello</td>
    <td>This is a sentence</td>
  </tr>
  <tr>
    <td>Foo</td>
    <td>This is a longer sentence</td>
  </tr>
  <tr>
    <td>Foo................</td>
    <td>This is a longer sentence...........</td>
  </tr>
</table>

codepen-https://codepen.io/nagasai/pen/JqGmrV