使用和不使用滚动条的 div 内的表格填充 [重复]答案

【问题标题】：Padding for table inside div with and without scrollbar [duplicate]使用和不使用滚动条的 div 内的表格填充 [重复]
【发布时间】：2012-05-17 21:33:06
【问题描述】：

我有一个包含表格的 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>

输出：

【问题讨论】：

标签： html css padding

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

【讨论】：