title: Responsive table with vertical and horizontal headers
body: <p>I have the following table (<a href="http://jsfiddle.net/w76wsoyj/" rel="nofollow noreferrer">jsFiddle</a>):</p>
  
  <p><img src="https://i.stack.imgur.com/mS4Uv.png" alt="enter image description here"></p>
  
  <pre><code>    &lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th scope="col"&gt;BMW&lt;/th&gt;
          &lt;th scope="col"&gt;Audi&lt;/th&gt;
          &lt;th scope="col"&gt;Mercedes&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th scope="row"&gt;GPS&lt;/th&gt;
          &lt;td&gt;1200&lt;/td&gt;
          &lt;td&gt;1000&lt;/td&gt;
          &lt;td&gt;1400&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th scope="row"&gt;Bluetooth&lt;/th&gt;
          &lt;td&gt;700&lt;/td&gt;
          &lt;td&gt;750&lt;/td&gt;
          &lt;td&gt;680&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th scope="row"&gt;Sensors&lt;/th&gt;
          &lt;td&gt;1230&lt;/td&gt;
          &lt;td&gt;1400&lt;/td&gt;
          &lt;td&gt;1100&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>How do I make it responsive, so that in mobile devices the table will look like this:</p>
  
  <p><img src="https://i.imgur.com/GU14KTo.png" alt="Responsive"></p>
  
  <pre><code>    &lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th scope="col"&gt;BMW&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th scope="row"&gt;GPS&lt;/th&gt;
          &lt;td&gt;1200&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th scope="row"&gt;Bluetooth&lt;/th&gt;
          &lt;td&gt;700&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th scope="row"&gt;Sensors&lt;/th&gt;
          &lt;td&gt;1230&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Is it possible to do this just in CSS? I'm guessing not since I will need to duplicate the vertical headers</p>