HTML表保證金

全寬所以，我有一個表：HTML表保證金

<table border=1> 
    <caption>This is a table.</caption> 
    <tr> 
     <th>One</th> 
     <th>Two</th> 
     <th>Three</th> 
    </tr> 
    <tr> 
     <td>Four</td> 
     <td>Five</td> 
     <td>Six</td> 
    </tr> 
</table>

，我希望它是儘可能寬，同時仍然留在每邊20像素的保證金。所以，我這樣做：

table{ 
    border-collapse:collapse; 
    margin:20px; 
    padding:0; 
    width:100%; 
}

，但它最終被父的寬度，再加上左側有一個額外20px的保證金，造成垂直滾動條出現。有沒有辦法使它的40px比父寬度小，而不需要添加其他元素來包圍它呢？

的jsfiddle：http://jsfiddle.net/pvHNM/

來源

2012-01-11 John Stimac

的[股利寬度的像素的100％減去固定量]可能重複（http://stackoverflow.com/questions/651317/div-width-100-minus-fixed-amount-of-pixels） – Gajus 2014-04-06 13:15:26

使用計算（）來計算預期寬度：

table { 
    margin: auto; 
    width: calc(100% - 40px); 
}

http://jsfiddle.net/EXS76/1/

來源

2014-07-23 19:03:36 Michael

很容易忘記，現在可以使用這些新功能。 http://caniuse.com/#search=calc – 2014-08-27 18:31:12

@MichaelCordingley表示同意，將這樣一個新的CSS功能與老派

– Michael2014-12-16 17:20:32

通過CSS規則，該width屬性設置元素的內容的寬度，所以你要求的可用寬度的100％分配給表本身和一些額外的空間分配給利潤。這不可避免地會導致水平滾動。

作爲一種解決方法，您可以將表格封裝在div元素中並在其上設置margin。

來源

2012-01-11 01:08:53

您可以在表格元素上設置填充。裏面的tad和tfoot和row將填滿表格中的空間。

table 
{ 
    border-collapse:collapse; 
    padding:20px; 
    margin:0; 
    width:100%; 
}

來源

2013-02-27 12:35:13 Victor

聰明和聰明 – 2016-04-11 20:34:11

似乎這不起作用（更多？）： https://jsfiddle.net/kvpupvo8/1/ – BurninLeo 2018-01-14 11:22:09

我找到了最好的答案是有用的，但它不工作，在舊的瀏覽器。最適合我的是桌子外的DIV設定邊距。然後，父級的100％寬度將受該div的影響，而不是父級元素。

<div style="margin"> 
    <table style="width:100%"> 
    </table> 
</div>

來源

2015-04-14 17:32:32 LucasJohn

-1

如何讓表延伸到像一個div會，不知道有關兼容性的容器的整個寬度利用墊片？

table:after { 
    content: "i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i"; 
    display: block; 
    height: 0em; 
    visibility: hidden; 
}

來源

2016-03-02 06:11:29

相關問題

回答

相關問題