这是我的DOM：
<html>
<body>
<table>
<tr>
<td>
hello
</td>
</tr>
</table>
</body>
</html>
和我的CSS：
html, body {
height: 100%;
width: 100%;
}
table {
height: 100%;
width: 100%;
}
td {
border: 1px solid gray;
height: 10%;
width: 10;
}
我想做的是使用百分比来调整
TD元素的高度和宽度。但是此代码不起作用。我知道子元素的大小将继承其父元素的大小。因此，TD将继承TABLE的大小，然后继承TABLE或BODY父元素的HTML。我的代码没有做到这一点。但是，如果我在width: 10%;上执行TABLE，那么它将获得BODY/HTML元素宽度的10％。与height: 10%相同。但是，为什么它不能在TD标签上使用？ 最佳答案
td标记被迫占用其父代的所有剩余空间。
因此，布局完全忽略了您的width: 10%;。
请参阅此无效的JSFiddle Demo。
但是，如果我们在display: inline-block;中添加一些td，则可以解决此问题。
看到此（现在）工作的JSFiddle Demo。
关于html - 子元素的宽度或高度在CSS中不变，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20877011/