title: CSS 100% width scrollbar (overflow-x) within a table cell
body: <p>it's my first post. Finally I decided to join you all at stackoverflow!</p>
  
  <p>My problem is about an horizontal scrollbar which has to fit 100% to its container. In the following example you'll find everything you need to understand my problem.</p>
  
  <p><a href="http://jsfiddle.net/cexUr" rel="nofollow">http://jsfiddle.net/cexUr</a></p>
  
  <p>So the question would be: why the code works fine in first case but when nested within a table cell (second case) then the scrollbar overflows its container? Why this happens and how could it be fixed?
  One could say: "just get rid of tables", but I need this code working in a big site which has some table layout. Getting rid of tables would represent for me hundred hours of work.</p>
  
  <p>Main difference between first (correct) and second scrollb (incorrect) is:</p>
  
  <h2>First scroll (correct)</h2>
  
  <pre><code>&lt;div class="hscroll"&gt; (images) &lt;/div&gt;
  </code></pre>
  
  <p>CSS code of the horizontal scroll:</p>
  
  <pre><code>.hscroll {
      overflow-x:scroll;
      overflow-y:hidden;
      white-space:nowrap;
  }
  </code></pre>
  
  <h2>Second scroll (incorrect)</h2>
  
  <pre><code>&lt;table&gt;&lt;tr&gt;&lt;td&gt; (same code as first scroll) &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  </code></pre>
  
  <p>I'll appreciate your wise suggestions very much.</p>
  
  <p>Gerard.</p>