Mobile responsive table with HTML
<p>I have a table that has 2 header columns and 4 columns of links. Example code below.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>table{
    border: 1px solid black;
    table-layout: fixed;
    width:100%
}


th, td{
    border: 1px solid black;
    overflow: hidden;
}

td {
  width:25%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> 
&lt;table class="fixed-width"&gt;
   &lt;tr&gt;
      &lt;th colspan=2&gt;header 1&lt;/th&gt;
      &lt;th colspan=2&gt;header 234567895678657&lt;/th&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
      &lt;td&gt;data asdfasdfasdfasdfasdf&lt;/td&gt;
      &lt;td&gt;data 2&lt;/td&gt;
      &lt;td&gt;link 3&lt;/td&gt;
      &lt;td&gt;link 4&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
      &lt;td&gt;data asdfasdfasdfasdfasdf&lt;/td&gt;
      &lt;td&gt;data 2&lt;/td&gt;
      &lt;td&gt;link 3&lt;/td&gt;
      &lt;td&gt;link 4&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
      &lt;td&gt;data asdfasdfasdfasdfasdf&lt;/td&gt;
      &lt;td&gt;data 2&lt;/td&gt;
      &lt;td&gt;link 3&lt;/td&gt;
      &lt;td&gt;link 4&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
      &lt;td&gt;data asdfasdfasdfasdfasdf&lt;/td&gt;
      &lt;td&gt;data 2&lt;/td&gt;
      &lt;td&gt;link 3&lt;/td&gt;
      &lt;td&gt;link 4&lt;/td&gt;
   &lt;/tr&gt;
&lt;/table&gt;
    </code></pre>
</div>
</div>
</p>

<p><a href="https://jsfiddle.net/pse6thr8/21/" rel="nofollow">https://jsfiddle.net/pse6thr8/21/</a></p>

<p>I would like the table to look something like this when a mobile accesses it.
<a href="http://i.stack.imgur.com/TLpLm.png" rel="nofollow">New Table</a></p>