为什么TD宽度不起作用或没有遵循? [英] Why TD width is not working or not followed?

问题描述

原始问题:HTML

是否有默认宽度?

Original question: Does HTML <table> have a default width?

最近有人问了一个类似这样的问题，让我想知道.

Recently someone asked a question somewhere along these lines, and got me wondering.

以这个为例.

http://jsfiddle.net/rqmNY/1/

在这个小提琴中，如果您要检查它的宽度(我使用的是来自 chrome 的检查元素)，它会显示 100px，按预期工作.

In this fiddle, if you were to check its width (I'm using inspect element from chrome), it shows 100px, working as intended.

让我们再添加几个td"，我们将看到td:100px"css 被忽略了.

Lets add a few more "td"s in, and we shall see that the "td:100px" css is being ignored.

http://jsfiddle.net/rqmNY/2/

如您所见，现在它是 83px 而不是最初预期的 100px.

As you can see, now it's 83px instead of 100px as originally intended.

但是让我们说，我移回较少的 TD (7)，并为每个 TD 元素添加更宽的宽度 (500px)，结果是 td 的宽度卡在 119px.

But let's say, I move back to fewer TD's (7), and I add in a wider width to each TD element (500px), the result is that the width of the td gets stuck at 119px.

http://jsfiddle.net/rqmNY/6/

最后，假设我有一个宽度为 2000px 的表格和 100px 宽度的 td，以及许多 td 元素.http://jsfiddle.net/rqmNY/7/

And finally, let's say I have a table of 2000px width, and td of 100px width, and many td elements. http://jsfiddle.net/rqmNY/7/

现在表格宽度覆盖了 TD 宽度，并将 td 的宽度扩展到 222px.

Now the table width overrides the TD width, and expands the td's width to 222px.

谁能解释这种行为?

附言请注意，在所有情况下，inspect element 工具都告诉我宽度始终与 css 相对应，只是最终结果显示不正确.

p.s. Note that in all cases, inspect element tool tells me that the width is always corresponding to the css, it's just the final result not showing correctly.

推荐答案

我非常相信这个问题的答案是这样的:

I highly believe the answer to this question is such:

影响TD的宽度的优先级是

The priority of widths that will affect the TD is

1. 表格宽度

1. Table Width

父元素宽度(如果没有，则为视口)

Parent Element Width (and if none, Viewport)

元素(TD)宽度.

因此，如果设置了表格宽度，TD 将始终根据表格的宽度进行调整.但是，如果宽度未设置，主要"宽度将是视口的真实宽度.除非 CSS 代码另有说明，否则这适用.并且只有当 TD 的总宽度小于视口的宽度时，才会考虑元素宽度.

Hence if the table width is set, the TD's will ALWAYS adjust to the width of the table. However, if the width is unset, the "main" width will be the true width of the viewport. Unless the CSS code states otherwise, this holds true. And only when the total width of the TD's is smaller than that of the viewport, the elemental width will be taken into account.

编辑

1. 表格宽度将始终覆盖 TD 宽度.

1. Table width will always override TD width.

规定的 TD 宽度只会在超过视口宽度时才会遵循，视口宽度将被优先考虑.

Stated TD width will only be followed until it exceeds viewport width, and viewport width will be taken as priority.

这篇关于为什么TD宽度不起作用或没有遵循?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

登录 关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件 谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.