td标签高度属性不起作用

最新推荐文章于 2024-12-08 21:52:28 发布

原创最新推荐文章于 2024-12-08 21:52:28 发布 · 1.2w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #td

前端专栏收录该内容

5 篇文章

订阅专栏

问题描述

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>