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>

我怎样才能使溢出将父divs填充考虑在内并且不与它重叠？

Answer 1

这是正常的，所以请使用margin而不是padding。

或者在内部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;
}

表溢出忽略父div

2 个答案: