Different top-margins in a div-based table

Question

I want to emulate the following behaviour in a div/css-based table

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

Margin for a single cell seems to get ignored

<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>

Padding applies to all cells even if only specified for a single one

<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>

Same goes for workarounds by adding inner divs with padding/margin

<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>

Can be seen in: http://jsfiddle.net/RXRBm/19/

If you want "cells" to have different dimensions or margins, `display:table` probably isn't appropriate — Rhumborl, Dec 15 '14 at 14:24

SW4 · Answer 1 · 2014-12-15T14:32:38.697

Padding is not being applied to all cells- dont forget cell contents are vertically aligned by default and fit to the height of the row as determined by the cell with the greatest height. As such, margins cannot be applied and are ignored, and ensuring you have (e.g):

td{
   vertical-align:top;
}

Will ensure you clearly see the impact of any applied padding without any additional vertical alignmnet changing the positioning of contents in other cells.

Demo Fiddle

If you look at the default HTML4 CSS style spec proposition, you can see this vertical-align in play

score 0 · Accepted Answer · edited May 23 '17 at 10:33

0

table-cell divs aren't affected by margins, but some of your workarounds can work, if you force vertical alignment on the other cell:

<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>

edited May 23 '17 at 10:33

Community

1
1

answered Dec 15 '14 at 14:26

Paul Roub

36,322
27
84
93

Different top-margins in a div-based table

2 Answers2

Demo Fiddle