0

作業中の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のパディングが考慮され、重複しないようにするにはどうすればよいですか？

4

2 に答える 2

0

これは正常なので、パディングの代わりにマージンを使用します。

または、テーブルを内側のDIVで二重にラップします。

于 2012-08-30T09:36:17.353 に答える
0

これは通常の動作です。テーブルは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;
}
于 2012-08-30T09:46:55.263 に答える