How do I emulate a table with divs & css?

Question

A table like this one:

<table>

  <tr>
   <td> ... </td>
   <td> ... </td>
   <td> ... </td>
  </tr>

  <tr>
   <td> ... </td>
   <td> ... </td>
   <td> ... </td>
  </tr>

  ...
</table>

How can I create one using div and css display:table rules ?

Answer 1

Try this ;)

CSS

.table {
    display: table;
    width: 500px;
}
.tr { 
    display: table-row; 
}
.td { 
    display: table-cell;
}

HTML

<div class="table">
    <div class="tr">
        <div class="td">asdf</div>
        <div class="td">asdf</div>
        <div class="td">asdf</div>
    </div>
    <div class="tr">
        <div class="td">asdf</div>
        <div class="td">asdf</div>
        <div class="td">asdf</div>
    </div>
</div>