table 高度不能设置的解决办法

最新推荐文章于 2024-08-01 11:14:32 发布

saturday-yh

最新推荐文章于 2024-08-01 11:14:32 发布

阅读量4.3w

点赞数 4

分类专栏： css

本文链接：https://blog.csdn.net/qq_42092177/article/details/80924828

版权

css 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	ul {
				height: 0;
				border: 1px solid #FF0000;
				overflow: hidden;
			}
			table {
				height: 0;
				border: 1px solid #FF0000;
				overflow: hidden;
			}
			span {
				height: 0;
				border: 1px solid #FF0000;
				overflow: hidden;
			}

	</style>
</head>
<body>
	<ul>
			<li>我是ul</li>
			<li>我是ul</li>
			<li>我是ul</li>
		</ul>
		<table border="0" cellspacing="0" cellpadding="0">
			<tr><td>我是table</td></tr>
			<tr><td>我是table</td></tr>
			<tr><td>我是table</td></tr>
		</table>
		<span>
			我是span
		</span>
<!-- 从上面的运行效果我们可以看出，只有 ul 的高度确实被设置为 0 了，而 table 的高度却并没有被设置为0，但是当设置的高度值大于它的内容高度的时候，它又明明有作用的嘛，这个table好像可以又不可以设置高度了，这是为什么呢？（当然，我们要首先排除table不愿意变“矮”这样一个心理因素）

总结：table 加上display:inline-block 和block就可以改变高度了 -->
</body>
</html>

从上面的运行效果我们可以看出，只有 ul 的高度确实被设置为 0 了，而 table 的高度却并没有被设置为0，但是当设置的高度值大于它的内容高度的时候，它又明明有作用的嘛，这个table好像可以又不可以设置高度了，这是为什么呢？（当然，我们要首先排除table不愿意变“矮”这样一个心理因素）


总结：table 加上display:inline-block 和block就可以改变高度了，加上属性试一试吧！