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

HTML表保证金

回答

相关问题