设置要显示的表:块

Question

我喜欢让我的表行为像块元素.我无法将其设置为宽度:100%,因为它确实有一些填充,这将导致100%+填充PX.

退房:http://jsfiddle.net/LScqQ

最后桌子做了我想要的,你能看到盒子阴影吗？但桌子上的孩子不喜欢那样^^

我猜THEAD里面的TH是问题所在.它们没有达到66%至33%的预期比率.

把招工广告...

Answer 1

你的桌子应该是display: table.如果你担心尺寸,请使用box-sizing: content-box.

原因是display: table创建了表格布局机制,需要布置行和列; 在某些条件下,如果不存在所需的元素,它们将被隐式创建,但它可能会导致问题.(您可以测试出通过与表格的布局divS和将其设置为display: table,table-row,table-cell,这是默认的用户代理的风格table,tr和td元素.如果你玩弄于不同的组合取消设置了div的样式,你" ll看到有时浏览器隐式地使表格布局不正确.)

因此,display: table-*如果您想要实际的表格布局,请始终保持样式不变.使用适当的样式整理宽度问题.如果你更好地描述你想要的东西,也许你可以得到更好的答案.

Answer 2

最后我自己找到了答案.

将您的表放在包装容器中并编写类似于此的CSS规则:

// HTML

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

// CSS

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

现在,表格将不再溢出您的布局,并且完全像大多数元素一样.