0

テーブルを囲む div があります。Div には 20px のパディングがあります。テーブルのサイズが div より大きい場合、スクロール バーを div に表示する必要があります。

問題: スクロール バーが存在しない場合、パディングは正常に機能します。ただし、スクロールバーが存在する場合、スクロールバーは右側のパディングを完全に占有します。ただし、スクロールバーを使用すると、下のパディングがまだ適用される方法があります。

質問: div に 20px のパディングを与え、そのコンテンツがスクロール バーからのパディング計算を行うようにする方法は? 注: table 要素にはスタイルを指定できません。このテーブルは div ラッパーを認識していないためです。

サンプルコードと出力画像を添付。

<html>
<head>
<style type="text/css">
.parentDiv {
    border: 1px solid red; 
    height: 50px; 
    width: 200px; 
    overflow: auto; 
    padding: 20px;
}

.childDiv {
    border: 1px solid blue;
}
</style>
</head>
<body>
    <div class="parentDiv">
        <table class="childDiv" width="100%" height="100%">
         <tr>
           <td></td>
         </tr>
        </table>
    </div>
    <br/>
    <div class="parentDiv">
        <table class="childDiv" width="100%" height="100%">
         <tr>
           <td><pre>Sample text <input type="textbox"/></pre><br/>Sample second line</td>
         </tr>
        </table>
    </div>
</body>
</html>

出力： ここに画像の説明を入力

4

1 に答える 1

1

parentDivクラスからパディングを取り出し、テーブルを新しいdivでラップします。parentDivにはスクロールバーが表示されますが、コンテナdivは、それらに対応するためにテーブルを圧縮する必要があります。

これを試して：

<div class="parentDiv">         
    <div class="childDiv">                
        <table>            
            <tr>              
                <td></td>            
            </tr>           
        </table>       
    </div>
</div> 


<style type="text/css">         
     .parentDiv {             
        border: 1px solid red;
        width: 200px;
        overflow:auto;
}     


    .childDiv {             
         border: 1px solid blue; 
         padding: 20px; 
         width:100%;
         height:100%;        
    }         
</style>

テーブルの高さを増やすと、下の境界線がdivの下部から外れることに気付くでしょう。下にスクロールして表示できます。

スクロールインを新しいdivに移動できます。

<style type="text/css">         
    .parentDiv {             
        border: 1px solid red;
        width: 200px;
        padding: 20px;         
    }     


    .childDiv {             
        border: 1px solid blue; 
        width:100%;
        overflow-y:auto;
        height:50px;        
    }         
</style>
于 2012-05-17T13:11:47.283 に答える