title: Responsive table with 100% width
body: <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>