0

我正在尝试用 CSSdisplay:table display:table-row和display:table-cell. 问题是我无法设置表格行的高度。它们扩展到父级高度。在我的代码中，我将.trowheight 设置为30px但它们被扩展为 parent height 400px。!important和内联样式也不起作用。我该如何解决这个问题？

PS 很抱歉我的英语不好。

<!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>
4

2 回答 2

2

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

只需删除所有display属性，一切都会好起来的。

演示在这里

于 2013-10-18T21:48:14.077 回答
0

这是表格单元格的默认行为。如果您不希望单元格填补空白，则必须提供其他内容。

我刚刚添加了另一行：

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

将您的行推到表格的顶部

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

http://jsfiddle.net/vdy4Y/

于 2013-10-18T22:12:28.570 回答