css - 表溢出忽略父 div

Question

我正在处理的一些 CSS 有问题。我有一个盒子，四面都有 10px 的填充，里面有一张桌子。我想在表格上溢出：自动，但是当我滚动时，表格会忽略其父级的顶部和底部填充，具体取决于它的滚动方式。

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>

我怎样才能使溢出考虑到父 div 填充而不与它重叠？

Answer 1

这是正常的，所以使用边距而不是填充。

或者将表格双重包裹在内部 DIV 中。

Answer 2

那是正常的行为，你的表格将在 div 内呈现 20px 填充，然后整个单元将滚动，在提供 20px 填充后它不会腾出空间，然后在其中滚动表格，

您可以尝试类似：http: //jsfiddle.net/mrVce/1/

    <div id="infoHolder">
        <div class="inner">
        <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>
        </table>
        <div>

#infoHolder
{
    width: 749px;
    height: 300px;
    padding: 20px;
    border:1px solid red;
    background:yellow;
}
#infoHolder .inner{
height:300px;
    overflow:auto;
    border:1px solid green;
}        
#infoHolder table
{
    margin: 0;
    width: 200px;
    background:orange;
}