title: Table in an overflow DIV
body: <p>I have a table that is in a DIV with <code>overflow: auto</code> :</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="table"&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;th&gt;Heading&lt;/th&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td&gt;Data&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In total there are 6 TH tags and 6 TD tags</p>
  
  <p>CSS:</p>
  
  <pre><code>div#table
  {
      overflow: auto;
      padding: 15px;
  }
  
  div#table table
  {
      border-collapse: collapse;
  }
  </code></pre>
  
  <p>The overflow ensures that there is a horizontal scroll bar on the DIV so that the full table can be viewed.</p>
  
  <p>I also specified padding on the DIV in the hope that the scroll bar and table are not positioned on the edges of the DIV - however this bit isn't working.</p>
  
  <p>So basically what I want is for there to be padding around the DIV and the overflown content should not be touching the right edge of the DIV. I hope this makes sense!</p>