Responsive table with 100% width
<p>Here's code:</p>

<pre><code>&lt;div class="row"&gt;
  &lt;div class="large-12 columns"&gt;

    &lt;table class="scroll wide"&gt;

      &lt;tr&gt;
        &lt;td&gt;First&lt;/td&gt;
        &lt;td&gt;Second&lt;/td&gt;
        &lt;td&gt;Third&lt;/td&gt;
        &lt;td&gt;Forth&lt;/td&gt;
      &lt;/tr&gt;

    &lt;/table&gt;

  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.wide { width: 100%; }
</code></pre>

<p>Here's fiddle:</p>

<p><a href="https://jsfiddle.net/emilcieslar/zc37ydys/" rel="nofollow">https://jsfiddle.net/emilcieslar/zc37ydys/</a></p>

<p>As you can see, there are 4 columns and scroll class that makes the table scrollable whenever the width of the page is smaller than the table width. However if I want to make the table width 100%, it stays the same, it doesn't stretch. I can see that the table tag itself is stretched, but the insides doesn't stretch. This is caused by table being display: block, however it has to be display: block, otherwise it won't be scrollable (on horizontal axis). How can I achieve 100% width table while still being responsive?</p>