The general consensus around the web is to not use tables, and there are many reasons not to, but table layouts are tricky. Generally you are stuck using a fixed table layout, which doesn’t expand to fit it’s content like the <table>; or you use a flexible layout but that limits your control over column widths.
CSS Tables also tend to be built like the table element, so don’t gain a big reduction in elements or much semantic value.
<table> <thead> <tr> <th>Col Head</th> </tr> </thead> <tbody> <tr> <td>Col Value</td> </tr> </tbody> </table>
<div class="table"> <div class="row header"> <div class="column"></div> </div> <div class="row"> <div class="column"></div> </div> </div>
I needed to be able to have both fixed and flexible columns, and allow the table to expand to fit it’s content (even growing outside it’s container). I came up with what I think is an interesting solution. I’ve flipped the traditional table on it’s head by having each column contain all of it’s rows (JSFiddle). By containing all the rows for each column, it can be constrained or expand based on the normal rules of CSS. The columns have their `display` property set as `table-cells` which lets them layout from left to right without floating or dealing with inline-block.