title: Foundation 5 table with horizontal scroll bar
body: <p>I was wondering if <strong>Zurb Foundation</strong> has a fix in <code>table</code> with many columns. Apparently, 3 to 6 columned <code>table</code> will still be responsive... but my table has 12 columns. And I thought that the framework will put the scroll bars to the table.</p>
  
  <p>But my problem is, it does not. So how can <strong>I put horizontal scroll bar to the <code>table</code></strong>? I want to give the table a scroll bar when it reaches the horizontal boundary of its parent (in my case, a <code>div</code>):</p>
  
  <pre><code>table.oversized { overflow-x: scroll; }
  </code></pre>
  
  <p>But it does not work. I try to put the <code>scroll bar</code> instead to the parent <code>div</code>:</p>
  
  <pre><code>div.parent-of-an-oversize-table { overflow-x: scroll; }
  </code></pre>
  
  <p>And..... it works. But the <code>width</code> is longer by ~100px.</p>
  
  <p>Can someone help me with this problem? I'm looking for a solution <strong>within the Zurbs Foundation framework</strong> but if there is another solution outside the framework, is still appreciated.</p>
  
  <p>Thanks.</p>