Question

我有一个包围桌子的div。 Div的填充量为20px。如果表格大小超过div，那么滚动条应该显示在div上。

问题：当滚动条不存在时，填充工作正常。但是当存在滚动条时，滚动条完全占据右侧边距。但有些底部填充仍然是如何使用滚动条应用事件。

问题：如何给div提供20px填充，并确保其内容从滚动条进行填充计算，如果存在div的边界？注意：表元素不能指定样式。由于此表不知道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>

输出： enter image description here

Answer 1

将padding从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>

使用和不使用滚动条填充div内的表格

1 个答案: