title: Displaying table columns below of each other for small displays (responsive layout)
body: <p>I have a table with two columns:</p>
  
  <pre>
  -------------
  |  A  |  B  |
  -------------
  </pre>
  
  <p>I the browser width is too small for this layout, it should switch to this layout:</p>
  
  <pre>
  -------------
  |     A     |
  -------------
  |     B     |
  -------------
  </pre>
  
  <p>I got this to work with fixed column width and "float:left":</p>
  
  <pre><code>&lt;table style="width: 100%;"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td style="width: 300px; float: left; border: 1px solid black;"&gt;This is column 1&lt;/td&gt;
              &lt;td style="width: 300px; float: left; border: 1px solid black;"&gt;This is column 2&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>However, I want the column widths to be "50%", using all the available space, and specifying a "min-width" in pixel, tried the following:</p>
  
  <pre><code>&lt;table style="width: 100%;"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td style="width: 50%; min-width: 200px; float: left; border: 1px solid black;"&gt;This is column 1&lt;/td&gt;
              &lt;td style="width: 50%; min-width: 200px; float: left; border: 1px solid black;"&gt;This is column 2&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>However, this immediately places the columns below each other, even though there is enough space to put them next to each other. What could I do instead?</p>