Question

我知道有一个类似的问题here，但它在我的情况下不起作用。

<table class="Layout">
    <tbody>
        <tr>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
        </tr>
    </tbody>
</table>

如何在不指定div.Key元素的高度的情况下，使<td>元素与其父<td> 具有相同的高度？

我的表将动态更改（添加和删除列和行），因此我无法将<td>元素强制为绝对大小，我也不想计算并给它们相对大小每次我修改表。 .Layout表大小也会动态变化，并且始终是绝对值。（出于某些原因，我也不想使用row / colspan，以防有人建议。）

有什么想法吗？

Answer 1

我通过在每个div.Key中添加内部div并使用display: table; and display: table-cell;找到了解决方案。这就是我需要的。这是代码：

.Layout {
    width: 1024px; /* TEST */
    height: 480px; /* TEST */
}
.Key {
    text-align: center;
    display: table;
    width: 100%;
    height: 100%;
}
.Key > div {
    display: table-cell;
    vertical-align: middle;
}

并且：

<table class="Layout">
    <tbody>
        <tr>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
        </tr>
    </tbody>
</table>

使<div>填充其父高，而不指定</div>上的高度

1 个答案: