title: CSS convert table columns into full-width stacked elements
body: <p>I've found many ways to create a 'tableless' table layout using only DIVs, but very little about the opposite.</p>
  
  <p>I have more than a few html pages with a table structure, and they all refer to a common CSS file. The tables have a simple 2-column layout as follows:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;th&gt;category&lt;/th&gt;
        &lt;td&gt;description&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th&gt;category&lt;/th&gt;
        &lt;td&gt;description&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I want to be able to transform the layout of the table through <strong>CSS only</strong>, in order to make it look like a 'single-column table' if you will, with both categories and descriptions stacked on top of another within the full-width of the table. I've tried display:block and width:100% but it doesn't work <strong>cross-browser</strong>.</p>
  
  <p>Thoughts?</p>