Making DIVs act like a table using CSS

Question

Alright, while designing a site, I came across a thought... I have a few parts of my site which would be better suited acting as a table, but isn't tabular data. For some reason it really bugs me to use a table for something that isn't a table. So I noted CSS's display options, yet I can't get it to work right. Here is what I am trying. What is the issue?

<div class="table">
  <div class="tr">
    <div class="td">Row 1, Cell 1</div>
    <div class="td">Row 1, Cell 2</div>
    <div class="td">Row 1, Cell 3</div>
  </div>
  <div class="tr">
    <div class="td">Row 2, Cell 1</div>
    <div class="td">Row 2, Cell 2</div>
    <div class="td">Row 2, Cell 3</div>
  </div>
</div>

This is what the CSS looks like.

div.table {border: 1px solid black; display: table; }
div.tr {border: 1px solid black; display: table-row; }
div.td {border: 1px solid black; display: table-cell; }

I would like the page to look like a table was used but the 'cells' all go on a new-line. Any thoughts?

Answer 1

Strange: What you quote looks fine, and should work. Are you sure there is no overriding display: block !important somewhere?

But as my opinion, I'm going to say that for the love of God, just use a table. :)

Seriously. The main argument for not using tables in such situations is that they aren't the right element semantically. But looking at that div-soup, you have to admit a <table> is the way more preferable construct, even if it's not exactly tabular data you're displaying.