带有`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>

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

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>

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>

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>

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