CSS 设置要显示的表格：块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7455650/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting a table to display: block
提问by redaxmedia
I like to get my table behave like a block element. I cannot set it to width:100% because it does have some padding, this is going to result 100% + the paddings PX.
我喜欢让我的表格表现得像块元素。我无法将其设置为 width:100% 因为它确实有一些填充，这将导致 100% + 填充 PX。
Check out: http://jsfiddle.net/LScqQ
Finally the table does what I want, can you see the box-shadow? But the table children don't like it that way^^
最后桌子做了我想要的，你能看到盒子阴影吗？但是餐桌上的孩子不喜欢这样^^
I guess the TH inside the THEAD are the problem. They do not get the aspected ratio of 66% to 33%.
我想 THEAD 里面的 TH 是问题所在。他们没有得到 66% 到 33% 的纵横比。
Help wanted...
把招工广告...
回答by Nicholas Wilson
Your table should be display: table. If you're worried about the sizing, use box-sizing: content-box.
你的桌子应该是display: table。如果您担心尺寸问题，请使用box-sizing: content-box.
The reason is that display: tablecreates the table layout mechanism the rows and columns need to be laid out; in certain conditions if the required elements aren't there, they will be implicitly created, but it can cause problems. (You can test that out by making a table layout with divs and setting them to display: table, table-row, table-cell, which are the default user agent styles for table, tr, and tdelements. If you play around with unsetting the styles on the divs in different combinations, you'll see that sometimes the browser implicitly makes the table layout incorrectly.)
原因是display: table创建了需要布局行和列的表格布局机制；在某些情况下，如果所需元素不存在，它们将被隐式创建，但这可能会导致问题。（您可以测试出通过与表格的布局divS和将其设置为display: table，table-row，table-cell，这是默认的用户代理的风格table，tr和td元素。如果你玩弄于不同的组合取消设置了div的样式，你”会看到有时浏览器会隐式地使表格布局不正确。）
So, always leave the display: table-*styles intact if you want an actual table layout. Sort out your width issues using the appropriate styles for that. If you describe better what you want, maybe you can get a better answer.
因此，display: table-*如果您想要实际的表格布局，请始终保持样式不变。使用适当的样式来解决您的宽度问题。如果你更好地描述你想要的东西，也许你可以获得更好的答案。
回答by redaxmedia
Finally I found the answer by myself.
最后我自己找到了答案。
Put your table inside a wrapper container and write a CSS rule similar to this:
将您的表放在一个包装容器中并编写类似于以下内容的 CSS 规则：
//HTML
//HTML
<div class="wrapper-table">
<table>...</table>
</div>
//CSS
//CSS
.wrapper-table > table
{
width: 100%;
}
Now the table will no longer overflow your layout and fits perfectly like most elements do.
现在表格将不再溢出您的布局，并且像大多数元素一样完美契合。
