Multi rows with display:table-cell

by ginpei

HTML

<h1>Humpty Dumpty</h1>
<div class="table">
    <div class="tr">
        <div class="td">Humpty Dumpty sat on a wall.</div>
        <div class="td">Humpty Dumpty had a great fall.</div>
        <div class="td">All the king's horses and all the king's men couldn't put Humpty together again.</div>
    </div>
    <div class="tr">
        <div class="td">Humpty Dumpty sat on a wall.</div>
        <div class="td">Humpty Dumpty had a great fall.</div>
        <div class="td">All the king's horses and all the king's men couldn't put Humpty together again.</div>
    </div>
</div>

CSS

.table {
    border-spacing: 4px;
}
.tr {
    display: table-row;
}
.td {
    border: solid 1px #eec;
    display: table-cell;
    width: 100px;

    background-color: #ffe;
    border-radius: 4px;
    color: #660;
    font: 1em serif;
    padding: 4px;
    text-shadow: 1px 1px #dd9;
}