使用 `overflow-wrap: break-word` 自动列宽

Question

我有一个包含 3 列的 HTML 表 - ID、时间戳和数据。ID 和时间戳非常窄，数据可能非常大，有时它没有换行符，以避免我设置的水平滚动条overflow-wrap: break-word。为了使它工作，我需要将我table-layout的fixed.

虽然它有效，但我不喜欢所有列现在都具有相等的宽度。我可以将前两列大小设置为某个固定宽度，但我希望它们适合内容。如何强制前 2 列调整其宽度，第三列占用剩余空间？

这是我的代码示例：

<table style="width: 100%; table-layout: fixed; overflow-wrap: break-word">
  <tr>
    <th>ID</th>
    <th>Time</th>
    <th>Data</th>
  </tr>
  <tr>
    <td>0</td>
    <td>10:11</td>
    <td>some_long_value_that_may_or_may_not_contain_a_space</td>
  </tr>
  <tr>
    <td>1</td>
    <td>10:12</td>
    <td>some_long_value_that_may_or_may_not_contain_a_space</td>
  </tr>
  <tr>
    <td>2</td>
    <td>10:13</td>
    <td>some_long_value_that_may_or_may_not_contain_a_space_and_it_may_be_so_long_that_it_wont_fit_into_the_column_and_needs_to_be_wrapped</td>
  </tr>
</table>

基本上我需要的是以某种方式强制前 2 列忽略table-layout: fixed或强制overflow-wrap: break-word没有它的工作。

Answer 1

我认为您应该使用显示 Flex 或在 CSS 中添加一些小调整，如下所示。

.table-wrap tr > td:nth-child(1),
.table-wrap tr > td:nth-child(2) {
  white-space: nowrap;
}

.table-wrap tr > td:nth-child(3) {
  word-break: break-word;
}

th,td {
  padding: 0px 16px
}

<table class="table-wrap" style="width: 100%;">
  <tr>
    <th>ID</th>
    <th>Time</th>
    <th>Data</th>
  </tr>
  <tr>
    <td>0</td>
    <td>10:11</td>
    <td>some_long_value_that_may_or_may_not_contain_a_space</td>
  </tr>
  <tr>
    <td>1</td>
    <td>10:12</td>
    <td>some_long_value_that_may_or_may_not_contain_a_space</td>
  </tr>
  <tr>
    <td>2</td>
    <td>10:13</td>
    <td>some_long_value_that_may_or_may_not_contain_a_space_and_it_may_be_so_long_that_it_wont_fit_into_the_column_and_needs_to_be_wrapped</td>
  </tr>
</table>