表溢出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; 
}