表溢出DIV

Question

我有一个表，它是在一个DIV与overflow: auto：

HTML：

<div id="table"> 
    <table> 
    <tr> 
     <th>Heading</th> 
    </tr> 

    <tr> 
     <td>Data</td> 
    </tr> 
    </table> 
</div> 

总共有6个TH标签和6个TD标签

CSS：

div#table 
{ 
    overflow: auto; 
    padding: 15px; 
} 

div#table table 
{ 
    border-collapse: collapse; 
} 

溢出确保在DIV上有一个水平滚动条，以便完整的表格e可以被观看。

我也在DIV中指定了填充，希望滚动条和表格不在DIV的边缘 - 但是这个位不起作用。

所以基本上我想要的是在DIV周围有填充，并且溢出的内容不应该触及DIV的右边缘。我希望这是有道理的！

Answer 1

您需要类似的东西？ http://jsbin.com/iseda3 如果是的话，你可以使用下面的代码：

HTML

<div id="table"> 
    <div> 
    <table> 
     <tr> 
     <th>Heading</th> 
     <th>Heading</th> 
     <th>Heading</th> 
     <th>Heading</th> 
     <th>Heading</th> 
     <th>Heading</th> 
     </tr> 
     <tr> 
     <td>Data</td> 
     <td>Data</td> 
     <td>Data</td> 
     <td>Data</td> 
     <td>Data</td> 
     <td>Data</td> 
     </tr> 
    </table> 
    </div> 
</div> 

CSS

div#table { 
    background:#09F; 
    width:150px; 
} 
div#table div { 
    overflow: auto; 
    margin: 15px; 
} 
div#table table { 
    border-collapse: collapse; 
} 

Answer 2

这听起来像是你需要将你的表包裹在一个进一步的<div>元素中，该元素具有所需的填充。您的表格将适合该元素，但仍然会受到父容器溢出的影响。

<div id="table"> 
    <div style="padding: 1em;"> 
    <table> 
    <tr> 
     <th>Heading</th> 
    </tr> 

    <tr> 
     <td>Data</td> 
    </tr> 
    </table> 
    </div> 
</div> 

Answer 3

你可能要考虑制造具有填充的容器DIV，然后把DIV ID为table，较大的div中。

div#tableHolder 
{ 
    padding: 15px; 
} 
div#table 
{ 
    overflow: auto; 
} 

div#table table 
{ 
    border-collapse: collapse; 
}