The magics of table-layout

12 Feb, 2014 · by admin · Read in about 1 min · (93 Words)
css table

<div>
    <div>cell lorem ipsum</div>
</div>

<div>
    <div>cell lorem ipsum</div>
    <div>cell lorem ipsum</div>
</div>

<div>
    <div>cell lorem ipsum</div>
    <div>cell</div>
    <div>cell lorem ipsum</div>
</div>

<div>
    <div>cell lorem ipsum</div>
    <div>cell</div>
    <div>cell</div>
    <div>c</div>
</div>

<div>
    <div>cell lorem ipsum</div>
    <div>cell</div>
    <div>c</div>
    <div>cell</div>
    <div>c</div>
</div>

<div>
    <div>cell lorem ipsum</div>
    <div>c</div>
    <div>c</div>
    <div>cell</div>
    <div>cell</div>
    <div>c</div>
</div>

Now the CSS:

div {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin-bottom: 20px;
    border-spacing: 5px;
}

div > div {
    display: table-cell;
    border: 1px dotted red;
    padding: 4px 6px;
    width: 100%;
    margin-bottom: 0;
    overflow:hidden;
}

The magic is done with table-layout.