td标签高度属性不起作用

最新推荐文章于 2023-12-11 15:24:24 发布

C_ZhangSir

最新推荐文章于 2023-12-11 15:24:24 发布

阅读量1.1w

点赞数 4

分类专栏：前端文章标签：前端 html td

本文链接：https://blog.csdn.net/C_ZhangSir/article/details/100353527

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

问题描述

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>

C_ZhangSir

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
td标签高度属性不起作用

问题描述table中的td设置高度属性"height"不起作用。此时还出现一件奇怪的事情：控制台显示该td元素的height属性生效，如下图所示：实际元素高度105px，但样式栏中的40px同样生效了。解决方案将<td></td>中的内容用<div></div>标签包裹住。效果如下：，此时多余的文本我们可以用overflow:h...
复制链接

扫一扫

专栏目录