Table in an overflow DIV

I have a table that is in a DIV with overflow: auto :

HTML:

<div id="table">
  <table>
    <tr>
      <th>Heading</th>
    </tr>

    <tr>
      <td>Data</td>
    </tr>
  </table>
</div>

In total there are 6 TH tags and 6 TD tags

CSS:

div#table
{
    overflow: auto;
    padding: 15px;
}

div#table table
{
    border-collapse: collapse;
}

The overflow ensures that there is a horizontal scroll bar o开发者_运维知识库n the DIV so that the full table can be viewed.

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.

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!

You need something like this? http://jsbin.com/iseda3 if yes you can use the following code:

html

<div id="table">
  <div>
    <table>
      <tr>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </table>
  </div>
</div>

css

div#table {
    background:#09F;
    width:150px;
}
div#table div {
    overflow: auto;
    margin: 15px;
}
div#table table {
    border-collapse: collapse;
}

It sounds like you need to wrap your table in one further <div> element that has the required padding within it. Your table would then fit within that element but would still be subject to the parent container's overflow.

<div id="table">
  <div style="padding: 1em;">
  <table>
    <tr>
      <th>Heading</th>
    </tr>

    <tr>
      <td>Data</td>
    </tr>
  </table>
  </div>
</div>

You might want to consider making a container div that has the padding, and then put the div with id table inside of that larger div.

div#tableHolder
{
    padding: 15px;
}
div#table
{
    overflow: auto;
}

div#table table
{
    border-collapse: collapse;
}