您的位置：首页 > Web前端 > HTML

html表格内容超出时隐藏和换行

2017-06-20 16:55 423 查看

表格内容超出时隐藏：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
table{
table-layout:fixed; /*使水平布局不受单元格的内容的影响*/
}
td{
width:50%;
overflow:hidden;/*文本超出时隐藏*/
white-space:nowrap;/*规定表格单元格中的内容不换行。*/
}
</style>
</head>
<body>
<table border="1px" width="100px">
<tr><td>333333333333</td><td>333333333333</td></tr>
<tr><td>123333333</td><td>3333333333334444</td></tr>
<tr><td>123333333</td><td>33333333333344444</td></tr>
<tr><td>123333333</td><td>33333333333344444</td></tr>
</table>
</body>
</html>

注：必须设置table的具体宽度，td的宽度设置使用百分制。不可直接给td设置具体的宽度数值。

表格内容超出时换行：

给td设置word-break:break-all。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html

相关文章推荐

新的分享

章节导航