我正在尝试使用 CSS display:table display:table-row 和 display:table-cell 制作一个表格。问题是我无法设置表格行的高度。它们扩展到 parent 的高度。在我的代码中，我将 .trow 高度设置为 30px 但它们会扩展到父高度 400px。!important 并且内联样式也不起作用。我该如何解决这个问题？
P.S 很抱歉我的英语不好。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.table{
display: table;
width: 500px;
border: 1px solid #000000;
height: 400px;
}
.trow{
height: 30px;
display: table-row;
width: 100%;
background-color: #444444;
}
.tcell{
display: table-cell;
width: 20%;
color: #ffffff;
}
</style>
</head>
<body>
<div class="table">
<div class="trow" style="height: 30px">
<div class="tcell">I'm table cell</div>
</div>
</div>
</body>
</html>
最佳答案
如果您需要非表格行为，为什么要使用display: table？默认表行为(如果指定了表高度)是扩展行高，直到填满整个表高度。这正是您所得到的。
只需删除所有 display 属性，一切都会好起来的。
关于html - 如何防止CSS表格行扩展到父级高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19459427/