title: Making DIVs act like a table using CSS
body: <p>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?</p>
  
  <pre><code>&lt;div class="table"&gt;
    &lt;div class="tr"&gt;
      &lt;div class="td"&gt;Row 1, Cell 1&lt;/div&gt;
      &lt;div class="td"&gt;Row 1, Cell 2&lt;/div&gt;
      &lt;div class="td"&gt;Row 1, Cell 3&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="tr"&gt;
      &lt;div class="td"&gt;Row 2, Cell 1&lt;/div&gt;
      &lt;div class="td"&gt;Row 2, Cell 2&lt;/div&gt;
      &lt;div class="td"&gt;Row 2, Cell 3&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is what the CSS looks like.</p>
  
  <pre><code>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; }
  </code></pre>
  
  <p>I would like the page to look like a table was used but the 'cells' all go on a new-line. Any thoughts?</p>