html - 如何将高度 100% 应用于表格单元格内容

Question

我在一行中有两个表格单元格。第一个有小的 div，第二个有更大的。第二个 div 拉伸(stretch)整行。如何让第一个 div 也延伸到整个单元格？

这是我得到的:

这就是我想要的:

HTML:

<table>
    <tr class="tr">
        <th class="th">
            <div class="div green">This div is short</div>
        </th>
        <th class="th">
            <div class="div blue">This div has more content so it pushes 
            the height of the whole row. However, the shorter div doesn't 
            stretch to the whole row. How do I fix this?</div>
        </th>
    </tr>
</table>

CSS:

.tr {
    width:100%;
    border:1px solid red;
    height:auto;
}
.th {
    display:table-cell;
    width:50%;
}
.div {
    /* What should be here? */
}
.green {
    background:green
}
.blue {
    background:blue
}

jsfiddle here

为什么我需要这个:表格存储大量表格数据。表格标题包含用于过滤表格内容的小部件，并且这些小部件具有可变高度。

Answer 1

最简单的方法是添加height: 100%;至 .inner并更改 height: auto;来自 .tr至 height: 100%; :

.container{
    width:100%;
    border:1px solid red;
    height: 100%;
}
.outer{
    display:table-cell;
    width:50%;
}
.inner{
    height: 100%;
}
.green{
    background:green
}
.blue{
    background:blue
}

然而，这将意味着您的文本不再在单元格中垂直居中。即使这就是您所展示的内容，它也不是 table-cell 的默认/正确行为内容。这是因为里面嵌套了一个div。

您可以删除您的子 div，只需将它们的类滑动到 <th> 即可。元素，它将使文本居中，更语义化地工作，并使用更少的代码:

HTML:

<table>
    <tr class="container">
        <th class="outer green">first</th>
        <th class="inner outer blue">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </th>
    </tr>
</table>

CSS:

.container {
    width: 100%;
    border: 1px solid red;
    height: 100%;
}

.outer {
    display: table-cell;
    width: 50%;
}

.green {
    background: green;
}

.blue {
    background: blue;
}

JSFiddle Example