Table in an overflow DIV

Question

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!

Can we see the rest of your css (the part that applies to these elements?) — JakeParis
– JakeParis, Commented Jan 6, 2011 at 20:46
how about simply adding a last <td> element in each row that is empty? — JakeParis
– JakeParis, Commented Jan 6, 2011 at 20:53

Sotiris · Accepted Answer · 2011-01-06 20:48:07Z

1

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

answered Jan 6, 2011 at 20:48

Sotiris

40.2k11 gold badges55 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Phil.Wheeler · Accepted Answer · 2011-01-06 20:46:29Z

0

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>

answered Jan 6, 2011 at 20:46

Phil.Wheeler

16.9k10 gold badges103 silver badges157 bronze badges

Comments

Dutchie432 · Accepted Answer · 2011-01-06 20:47:14Z

0

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

answered Jan 6, 2011 at 20:47

Dutchie432

29.3k20 gold badges94 silver badges110 bronze badges

Collectives™ on Stack Overflow

Table in an overflow DIV

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related