Div as Table

by Kyle Falconer

HTML

<div class="table col2">
    <div>all the way</div>
    <div class="row">
        <div>col 1</div>
        <div>1</div>
    </div>
    <div class="row">
        <div>col 2</div>
        <div>2</div>
    </div>
    <div class="row">
        <div>col 3</div>
        <div>2</div>
    </div>
</div>
<div class="table col3">
    <div>all the way</div>
    <div class="row">
        <div>col 1</div>
        <div>col 2</div>
        <div>1</div>
    </div>
    <div class="row">
        <div>col 1</div>
        <div>col 2</div>
        <div>2</div>
    </div>
    <div class="row">
        <div>col 1</div>
        <div>col 2</div>
        <div>3</div>
    </div>
</div>

CSS

.table {
    display:table;
    width:400px;
    margin-bottom:10px;
    border:1px solid #000;
}
.row {
    width:100%;
    display:table-row;
}
.row>* {
    display:table-cell;
    border: 1px solid #ff0000;
}
.col2 .row div:first-child {
    width:auto;
}
.col2 .row div:last-child {
    width:40px;
}
.col3 .row div {
    width:auto;
}
.col3 .row div:last-child {
    width:40px;
}