/* minimal */
.table {
display: table;
}
.row {
display: table-row-group;
}
.cell {
display: table-cell;
}
Making div-tables
This example is using div-tables
<!-- minimal -->
<div class='table'>
<div class='row'>
<div class='cell'>a1</div>
<div class='cell'>b1</div>
</div>
<div class='row'>
<div class='cell'>a2</div>
<div class='cell'>b2</div>
</div>
</div>
/* minimal */ .table { display: table; } .row { display: table-row-group; } .cell { display: table-cell; } /* borders + padding */ .cell { padding: 3px; border-bottom: 1px solid #999; border-right: 1px solid #999; } .row:nth-child(1) .cell { border-top: 1px solid #999; } .cell:nth-child(1) { border-left: 1px solid #999; } /* vertically center cell child-div */ .cell { vertical-align: middle; } .inner { display: inline-block; }
<!-- div with class='inner' will be vertically centered -->
<div class='table'>
<div class='row'>
<div class='cell'><div class='inner'>a1</div></div>
<div class='cell'><div class='inner'>b1</div></div>
</div>
<div class='row'>
<div class='cell'><div class='inner'>a2</div></div>
<div class='cell'><div class='inner'>b2</div></div>
</div>
</div>