问题描述
table中的td设置高度属性"height"不起作用。
此时还出现一件奇怪的事情:
- 控制台显示该td元素的height属性生效,如下图所示:实际元素高度105px,但样式栏中的
40px同样生效了。
解决方案
将<td></td>
中的内容用<div></div>
标签包裹住。
效果如下:
,此时多余的文本我们可以用overflow:hidden;
隐藏。
实验demo
一个demo就是一个html文件。复制粘贴即可用浏览器打开运行。
设置td的高度不生效:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是一个小Demo</title>
<style type="text/css">
table td {
border: 3px solid #000000;
height: 40px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
<th>第四列</th>
</tr>
</thead>
<tbody>
<tr>
<td>
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本
</td>
<td >
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
</td>
<td >
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
</td>
<td>
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
</td>
</tr>
</tbody>
</table>
</body>
</html>
添加div,间接控制td高度:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是一个小Demo</title>
<style type="text/css">
table td div {
border: 3px solid #000000;
height: 40px;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all; /* 内容自动换行 */
-webkit-box-orient: vertical; /* 垂直排列 */
display: -webkit-box;
-webkit-line-clamp:2;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
<th>第四列</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本</div>
</td>
<td>
<div>一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
</div>
</td>
<td>
<div> 一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本</div>
</td>
<td>
<div>
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
一大段文本一大段文本一大段文本一大段文本一大段文本
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>