gpt4 book ai didi

html - 如何防止CSS表格行扩展到父级高度

转载 作者:太空宇宙 更新时间:2023-11-04 04:18:54 26 4
gpt4 key购买 nike

我正在尝试使用 CSS display:table display:table-rowdisplay:table-cell 制作表格。问题是我无法设置表格行的高度。它们被扩展到父级高度。在我的代码中,我将 .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 属性,一切都会好起来的。

demo here

关于html - 如何防止CSS表格行扩展到父级高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19459427/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com