设置要显示的表格：块答案

【问题标题】：Setting a table to display: block设置要显示的表格：块
【发布时间】：2011-09-17 14:59:19
【问题描述】：

我想让我的表格表现得像块元素。我无法将其设置为 width:100%，因为它确实有一些填充，这将导致 100% + 填充 PX。

查看：http://jsfiddle.net/LScqQ

桌子终于做了我想要的，你能看到盒子阴影吗？但是餐桌小朋友不喜欢这样^^

我猜 THEAD 里面的 TH 是问题所在。他们没有得到 66% 到 33% 的纵横比。

需要帮助...

【问题讨论】：

这不是博客或论坛。如果您必须使用新信息更新您的问题，请明确提及。新读者不了解您的预编辑问题。
如果答案不是您想要的，请发表评论或回复，否则接受它以关闭问题（通过单击答案左侧的复选标记）。欢迎来到 SO，希望对您有所帮助。

标签： css width css-tables

【解决方案1】：

您的表格应该是display: table。如果您担心大小，请使用box-sizing: content-box。

原因是display: table创建了表格布局机制，行列需要布局；在某些情况下，如果所需的元素不存在，它们将被隐式创建，但这可能会导致问题。（您可以通过使用divs 制作表格布局并将它们设置为display: table、table-row、table-cell 来测试它，这是table、tr 和@ 的默认用户代理样式987654330@ 元素。如果您在不同组合中尝试取消设置 div 上的样式，您会发现有时浏览器会隐式地使表格布局不正确。）

因此，如果您想要实际的表格布局，请始终保持 display: table-* 样式不变。使用适当的样式解决您的宽度问题。如果你能更好地描述你想要什么，也许你能得到更好的答案。

【讨论】：

【解决方案2】：

终于我自己找到了答案。

将你的表格放在一个包装容器中，并编写一个类似这样的 CSS 规则：

//HTML

<div class="wrapper-table">
<table>...</table>
</div>

//CSS

.wrapper-table > table
{
    width: 100%;
}

现在表格将不再溢出您的布局，并且像大多数元素一样完美契合。

【讨论】：

这解决了我的问题。为什么我之前没有想到这个？？ :)