table 中的换行更改单元格大小

Question

我有一个包含 2 列的 table，其中一列有 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>

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

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

Answer 1

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

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>

Answer 2

只需添加一位css，代码显示在下面，试试

table td {
border: 1px solid blue;
}

table td:nth-child(1) {
width:100px;   //your value
}

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

希望这对你来说足够了

注册..

table 中的换行更改单元格大小

Word wrap in table changes cell size

html

css

word-wrap

css-tables