设置表格为display:block

Question

我希望让我的表格表现得像一个块级元素。我无法将其设置为width:100％，因为它有一些填充，这会导致100％ +填充PX。

查看：http://jsfiddle.net/LScqQ 最终，表格做到了我想要的效果，你能看到阴影吗？但是表格子元素不喜欢那样^^

我猜测THEAD中的TH是问题所在。 它们没有获得66％到33％的期望比例。

需要帮助...

- Henry Ruhs

---

这不是博客或论坛。如果您必须更新问题并添加新信息，请明确说明。新读者没有您修改前的问题知识。 - Rob W

如果答案不符合您的要求，请评论或回复，否则请接受它以关闭问题（通过点击答案左侧的勾号）。欢迎来到SO，希望您会发现它有用。 - Nicholas Wilson

Answer 1

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

原因是display: table创建了表格布局机制，行和列需要被布置；在某些条件下，如果所需元素不存在，则它们将被隐式创建，但这可能会引起问题。（您可以通过使用div并将其设置为display: table、table-row、table-cell来创建一个表格布局，这些是默认用户代理样式table、tr和td元素。如果您尝试以不同的组合取消div上的样式，您会发现有时浏览器会错误地隐式创建表格布局。）

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

- Nicholas Wilson

Answer 2

最终我自己找到了答案。

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

//HTML

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

//CSS

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

现在表格不再溢出您的布局，像大多数元素一样完美适配。

- Henry Ruhs

---

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