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

Question

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

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

这是我的代码示例：

<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>

我需要做的就是让前两列忽略table-layout: fixed或者在没有它的情况下强制overflow-wrap: break-word起作用。

- Djent

---

您最好的选择可能是了解display flex（或grid）并完全重写默认的display table。 - Sheraff

Answer 1

我认为你应该使用display: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>

- Vinu Prasad

---

好的，看起来使用 word-break: break-word 而不是 overflow-wrap: break-word 可以解决问题。 - Djent

Answer 2

你可以使用max-width来控制表格的宽度。然后将word-break: break-word;分配给第三个<td>即可。希望这正是你想要实现的。

table {
  max-width: 100%;
}

td {
  vertical-align: top;
}

th {
text-align: left;
}

td:nth-child(3){
    word-break: break-word;
}

<table>
  <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>

- Filip Huhta

Answer 3

尝试像这样在您的表格中添加display: flex：

table {
    width: 100%;
    display: flex;
}

td, th {
    padding: 5px 10px;
    vertical-align: top;
    text-align: left;
    white-space: nowrap;
}
td:nth-child(3){
    word-break: break-word;
    white-space: break-spaces;
}

table {
    width: 100%;
    display: flex;
}

td, th {
    padding: 5px 10px;
    vertical-align: top;
    text-align: left;
    white-space: nowrap;
}
td:nth-child(3){
    word-break: break-word;
    white-space: break-spaces;
}

<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>

- While1

Answer 4

如果你想让 CSS 忽略特定的选择器，你可以使用 :not() 伪类。

td:not(td:nth-child(1), td:nth-child(2)){
    // css to be applied just on the 3rd col
}

或者在你的情况下，从表格中移除width:100%。

table {
    width: 100%;
}

td, th {
    vertical-align: top;
    text-align: left;
    padding: 5px 10px;
}

td:not(td:nth-child(1), td:nth-child(2)){
    overflow-wrap: anywhere;
}

- nourhomsi

---

但是table-layout: fixed应用于整个表格，而不是单独的列。我需要width: 100%，这样表格就可以填满整个屏幕。 - Djent

然后只需删除固定布局并重新应用宽度：100％... 它就可以正常工作了。 - nourhomsi

这就是问题所在 - 我无法移除固定布局，因为 overflow-wrap: break-word 不会起作用。 - Djent