title: Force html table into single stacked column using only css and no javascript
body: <p>I'm creating a html template that wraps a table that is used to lay out a form. I have full control over the html that wraps the table not the table itself. The table is injected into my template before it's sent to the client. I have no control over this whatsoever. The only thing I do have control over is the html that wraps the table and any CSS.</p>
  
  <p>The table is a two column table that looks like this:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;Column 1&lt;/td&gt;
      &lt;td&gt;Column 2&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;this is column 1&lt;/td&gt;
      &lt;td&gt;this is column 2&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  -------------------------------------------------
  |Column 1                   |Column 2           |
  -------------------------------------------------
  |this is column 1           |this is  column 2  |
  -------------------------------------------------
  </code></pre>
  
  <p>However I would prefer if we could show it as one stacked column.</p>
  
  <pre><code>----------------------------
  |Column 1                   |
  -----------------------------
  |this is column 1           |
  -----------------------------
  |Column 2                   |
  -----------------------------
  | this is column 2          |
  -----------------------------
  </code></pre>
  
  <p>Is there a way to achieve this using only CSS, no Javascript?</p>