display: table-column

Created in response to this Stack Overflow question: http://stackoverflow.com/questions/30783570/what-does-display-table-column-do/30783971#30783971

HTML

<div class="table">
    <div class="table-colgroup">
        <div class="table-col col-1">Foo</div>
        <div class="table-col col-2">Bar</div>
    </div>
    <div class="table-row">
        <div class="table-cell">Hello</div>
        <div class="table-cell">World</div>
    </div>
    <div class="table-row">
        <div class="table-cell">Hello</div>
        <div class="table-cell">World</div>
    </div>
    <div class="table-row">
        <div class="table-cell">Hello</div>
        <div class="table-cell">World</div>
    </div>
</div>

CSS

.table {
    display: table;
    table-layout:fixed;
    border-collapse: collapse;
    width: 100%;
}

.table-row {
    display: table-row;
}

.table-cell {
    display: table-cell;
    border: 1px solid #abc;
    padding: 0.5em;
}

.table-colgroup {
    display: table-column-group;
}

.table-col {
    display: table-column;
}

.col-1 {
    text-align: center;   
}

.col-2 {
    background-color: Tomato;   
}