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

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

您可以使用<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;
}

希望这对你足够

Regds ..