设置要显示的表格:块
我喜欢让我的表格表现得像块元素。我无法将其设置为 width:100%,因为它确实有一些填充,这将导致 100% + 填充 PX。
最后,该表满足了我的要求,你能看到吗盒子阴影?但桌子上的孩子们不喜欢这样^^
我猜THEAD里面的TH就是问题所在。 他们没有得到 66% 比 33% 的长宽比。
需要帮助...
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.
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%.
Help wanted...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您的表格应该是
display: table
。如果您担心大小问题,请使用box-sizing: content-box
。原因是
display: table
创建了需要布局行和列的表格布局机制;在某些情况下,如果所需的元素不存在,它们将被隐式创建,但这可能会导致问题。 (您可以通过使用div
制作表格布局并将其设置为display: table
,table-row
,来测试这一点table-cell
,这是table
、tr
和td
元素的默认用户代理样式。以不同的组合取消设置 div 上的样式,您会发现有时浏览器隐式地使表格布局不正确。)因此,如果您想要实际的表格布局,请始终保持
display: table-*
样式不变。使用适当的样式来解决宽度问题。如果你更好地描述你想要什么,也许你能得到更好的答案。Your table should be
display: table
. If you're worried about the sizing, usebox-sizing: content-box
.The reason is that
display: table
creates 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 withdiv
s and setting them todisplay: table
,table-row
,table-cell
, which are the default user agent styles fortable
,tr
, andtd
elements. 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.)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.最后我自己找到了答案。
将表格放入包装容器中,并编写类似于以下内容的 CSS 规则:
//HTML
//CSS
现在,表格将不再溢出您的布局,并且像大多数表格一样完美贴合元素可以。
Finally I found the answer by myself.
Put your table inside a wrapper container and write a CSS rule similar to this:
//HTML
//CSS
Now the table will no longer overflow your layout and fits perfectly like most elements do.