Html – Table in an overflow DIV

csshtml

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 on 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!

Best Answer

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;
}
Related Topic