Question

我正在尝试使用CSS display:table display:table-row和display: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>

Answer 1

如果您需要非表行为，为什么要使用display: table？默认表行为（如果指定了表高度）是扩展行高，直到填满整个表高度。这正是你得到的。

只需删除所有display属性即可，而且可以正常使用。

demo here

Answer 2

这是表格单元格的默认行为。如果你希望细胞不填补空白，你必须提供其他的东西。

我刚刚添加了另一行：

<div class="trow tfill">
    <div class="tcell"></div>
</div>

将您的行推到表格的顶部

.tfill{
    height: 100%;
    background-color: #fff; 
}

http://jsfiddle.net/vdy4Y/

如何防止CSS表行扩展到父高

2 个答案: