html - 表格中的自动换行更改单元格大小

Question

我有一个包含 2 列的表格，其中一列包含 word-wrap: break-word:

table {
    table-layout: fixed;
    width: 100%;
    border: 1px dotted gray;
}

table td {
    border: 1px solid blue;
}

table td:nth-child(2) {
    word-wrap: break-word;
}

<table>
    <tr>
        <td>Column1</td>
        <td>Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2</td>
    </tr>
</table>

我想将第一列的宽度保持在最小值，并扩展第二列以适应表格的其余部分。

但 word-wrap: break-word 仅在我设置 table-layout: fixed 并且强制所有列具有相同尺寸时才有效。如果不在第一列上明确设置宽度值，我如何才能实现我想要的效果？

Answer 1

您可以使用 width 来实现<td> 的属性如下所示。

table {
  table-layout: fixed;
  border: 1px dotted gray;
}
table td {
  border: 1px solid blue;
}
table td:nth-child(2) {
  word-wrap: break-word;
  width: 100%;
  max-width: 1px;
}

<table>
  <tr>
    <td>Column1</td>
    <td>Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2</td>
  </tr>
</table>