制作一个 <div>填充它的父级 <td>高度,没有在 <td> 上指定高度 [英] Make a <div> fill its parent <td> height, without specifying height on <td>
问题描述
我知道这里有一个类似的问题,但它在我的情况下不起作用.
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>
如何使我的 How can I make my 我的表将动态更改(添加和删除列和行),因此我不能强制 My table will dynamically change (adding and deleting columns and rows) so I can't force the 有什么想法吗? 我找到了一个解决方案,通过在每个 I found a solution by adding an inner div into each 还有: 这篇关于制作一个 <div>填充它的父级 <td>高度,没有在 <td> 上指定高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!div.Key
元素与它们的父元素具有相同的高度 而不指定 的高度td>
元素 ?
div.Key
elements have the same height as their parent <td>
without specifying a height to <td>
elements ?<td>
元素为绝对大小,而且我也希望不必计算并在每次修改表格时给它们一个相对大小..Layout
表格大小也会动态变化,并且始终是一个绝对值.(出于某些原因,我也不想使用 row/colspan,以防有人建议这样做.)<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;并显示:table-cell;
这就是我需要的.代码如下: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>
登录
关闭