表溢出忽略父 div答案

【问题标题】：Table with overflow ignoring parent div表溢出忽略父 div
【发布时间】：2017-08-13 17:16:31
【问题描述】：

我正在处理的一些 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 填充而不与它重叠？

【问题讨论】：

标签： css html-table overflow

【解决方案1】：

这很正常，所以使用边距而不是内边距。

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

【讨论】：

【解决方案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;
}

【讨论】：