Question

I have a problem with some CSS I am working on. I have a box, with padding of 10px on all sides, and a table inside. I want overflow: auto on the table, but when I scroll, the table ignores the top and bottom padding of it’s parent depending on which way it’s scrolling.

CSS

#infoHolder .bottom 
{
    width: 749px;
    height: 300px;
    overflow: auto;
    padding: 0 20px;
}

#infoHolder .bottom table
{
    margin: 15px 0;
    width: 735px;
}

HTML

            <div id="infoHolder">
                <table>
                    <thead>
                        <tr>
                            <th colspan="7">
                                Info
                            </th>
                        </tr>
                    </thead>
                    <tr>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                    </tr>
                    <tr>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                    </tr>
                </table>
            </div>

How can I make it so that the overflow takes the parent divs padding into account and not overlap with it?

Answer 1

That’s normal, so use margin instead of padding.

Or double wrap the table in an inner DIV.