Html5 table 表格内容超出撑大单元格 解决方法
在HTML5中，如果你想要让表格的内容超出时撑大单元格，而不是自动换行，你可以通过设置table-layout: fixed和word-wrap: break-word样式来实现。这样可以确保表格的宽度不会因为内容过长而撑大，同时超出的内容会自动换行。
下面是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
table-layout: fixed; /* 设置表格布局为固定 */
border-collapse: collapse; /* 边框合并 */
}
td {
border: 1px solid black; /* 单元格边框 */
word-wrap: break-word; /* 允许在单词内换行 */
}
</style>
</head>
<body>
<table>
<tr>
<td>这是一些非常非常长的文本，它将会自动换行，而不是撑大单元格。</td>
<td>第二列的内容</td>
</tr>
<tr>
<td>第一行第一个单元格的内容非常长，它将会自动换行，但不会撑大整个单元格。</td>
<td>第二行第二列的内容</td>
</tr>
</table>
</body>
</html>在这个例子中，table-layout: fixed确保了表格的宽度是固定的，即每列的宽度是由该列最宽单元格的宽度决定的。word-wrap: break-word则允许单词内换行，当内容超出单元格宽度时。这样就可以防止表格的内容撑大单元格。
评论已关闭