Question

我想在基于div / css的表中模拟以下行为

<table>
    <tr>
        <td>a</td>
        <td style="padding-top: 20px">a</td>
    </tr>
</table>

单个细胞的保证金似乎被忽略了

<div style="display: table;">
    <div style="display: table-row">
        <div style="display: table-cell">x</div>
        <div style="display: table-cell; margin-top: 10px">x</div>
    </div>
</div>

填充适用于所有单元格，即使只指定了单个单元格

<div style="display: table;">
    <div style="display: table-row">
        <div style="display: table-cell">x</div>
        <div style="display: table-cell; padding-top: 10px">x</div>
    </div>
</div>

通过添加带有填充/边距的内部div

来解决变通方法

<div style="display: table;">
    <div style="display: table-row">
        <div style="display: table-cell;"><div style="padding-top: 20px;">x</div></div>
        <div style="display: table-cell;">x</div>
    </div>
</div>

<div style="display: table;">
    <div style="display: table-row">
        <div style="display: table-cell;"><div style="margin-top: 20px;">x</div></div>
        <div style="display: table-cell;">x</div>
    </div>
</div>

可以在：http://jsfiddle.net/RXRBm/19/

中看到

Answer 1

填充不适用于所有单元格 - 不要忘记单元格内容默认垂直对齐，并且适合行的高度，由具有最大高度的单元格确定。因此，边距不能被应用并被忽略，并确保你有（例如）：

td{
   vertical-align:top;
}

确保您清楚地看到任何应用填充的影响，而无需任何额外的垂直对齐来改变其他单元格中内容的位置。

Demo Fiddle

如果您查看默认HTML4 CSS style spec proposition，则可以看到此vertical-align正在播放

Answer 2

table-cell div aren't affected by margins，但是如果你强行在另一个单元格上进行垂直对齐，你的一些解决方法可以正常工作：

＆＃13;

<div style="display: table;">
    <div style="display: table-cell; vertical-align: top;">x</div>
    <div style="display: table-cell; padding-top: 20px">x</div>
</div>

＆＃13;

基于div的表中的不同顶边距

2 个答案:

Demo Fiddle