本文介绍了进行÷ div& gt;填写其父< td& gt;高度,而未在< td& gt;上指定高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我知道在,存在类似的问题,但是它

I know there is a similar question here, but it doesn't work in my case.

<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> 的高度元素吗?

How can I make my div.Key elements have the same height as their parent <td> without specifying a height to <td> elements ?

我的表会动态更改(添加和删除列和行),所以我不能强制< td> ; 元素的绝对大小,而且我也不想每次修改表时都不必计算并赋予它们一个相对大小。 .Layout 表的大小也会动态更改,并且始终是绝对值。 (出于某些原因,如果有人建议,我也不想使用row / colspan。)

My table will dynamically change (adding and deleting columns and rows) so I can't force the <td> element to an absolute size, and I would also like not to have to compute and give them a relative size every time I modify the table. The .Layout table size also changes dynamically and will always be an absolute value. (For some reasons I would also like not to use row/colspan in case someone suggests that.)

有什么想法吗?

推荐答案

我找到了一个解决方案,方法是在每个 div.Key 中添加一个内部div并使用 display :表;并显示:table-cell; 这就是我需要的。下面是代码:

I found a solution by adding an inner div into each div.Key and using display: table; and display: table-cell; This does what I need. Here is the code:

.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&amp; gt;填写其父&lt; td&amp; gt;高度,而未在&lt; td&amp; gt;上指定高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-14 13:23