设置要显示的表格:块

发布于 2024-12-05 14:40:09 字数 304 浏览 0 评论 0原文

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

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

最后,该表满足了我的要求,你能看到吗盒子阴影?但桌子上的孩子们不喜欢这样^^

我猜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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

娇柔作态 2024-12-12 14:40:09

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

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

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

Your table should be display: table. If you're worried about the sizing, use box-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 with divs and setting them to display: table, table-row, table-cell, which are the default user agent styles for table, tr, and td 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.

你穿错了嫁妆 2024-12-12 14:40:09

最后我自己找到了答案。

将表格放入包装容器中,并编写类似于以下内容的 CSS 规则:

//HTML

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

//CSS

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

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

Finally I found the answer by myself.

Put your table inside a wrapper container and write a CSS rule similar to this:

//HTML

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

//CSS

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

Now the table will no longer overflow your layout and fits perfectly like most elements do.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文