title: Responsive CSS to stack table by <thead>
body: <p>I would like to be able to display the following table so that it stacks by the header on mobile</p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Within the UK&lt;/th&gt;
          &lt;th&gt;Outside the UK&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;Within 1&lt;/td&gt;
          &lt;td&gt;Outside 1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Within 2&lt;/td&gt;
          &lt;td&gt;Outside 2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Within 3&lt;/td&gt;
          &lt;td&gt;Outside 3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Within 4&lt;/td&gt;
          &lt;td&gt;Outside 4&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>I would like the data to show on mobile as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/l0PdR.jpg" rel="nofollow noreferrer">Desired layout</a></p>