Html 为什么TD宽度不起作用或没有遵循？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14767459/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why TD width is not working or not followed?
提问by He Hui
Original question: Does HTML <table>have a default width?
原始问题：HTML 是否<table>有默认宽度？
Recently someone asked a question somewhere along these lines, and got me wondering.
最近有人问了一个类似这样的问题，让我想知道。
Take this for example.
以这个为例。
In this fiddle, if you were to check its width (I'm using inspect element from chrome), it shows 100px, working as intended.
在这个小提琴中，如果您要检查它的宽度（我使用的是来自 chrome 的检查元素），它会显示100px，按预期工作。
Lets add a few more "td"s in, and we shall see that the "td:100px" css is being ignored.
让我们再添加一些“td”，我们将看到“ td:100px” css 被忽略了。
As you can see, now it's 83px instead of 100pxas originally intended.
正如你所看到的，现在它是 83px 而不是100px最初的预期。
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.
但是让我们说，我移回较少的 TD (7)，并为每个 TD 元素添加更宽的宽度 (500px)，结果是 td 的宽度卡在119px.
And finally, let's say I have a table of 2000px width, and td of 100pxwidth, and many td elements.
http://jsfiddle.net/rqmNY/7/
最后，假设我有一个宽度为 2000 像素的表格，宽度为 td 100px，以及许多 td 元素。
http://jsfiddle.net/rqmNY/7/
Now the table width overrides the TD width, and expands the td's width to 222px.
现在表格宽度覆盖 TD 宽度，并将 td 的宽度扩展到222px。
Can anyone explain this behavior?
谁能解释这种行为？
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.
ps 请注意，在所有情况下，inspect element 工具都告诉我宽度始终与 css 相对应，这只是最终结果未正确显示。
回答by Cynthia
Have you tried adding display:inline-blockto your TD CSS? That forces the browser to not ignore your TD width.
您是否尝试添加display:inline-block到您的 TD CSS 中？这迫使浏览器不要忽略您的 TD 宽度。
回答by He Hui
I highly believe the answer to this question is such:
我非常相信这个问题的答案是这样的：
The priority of widths that will affect the TD is
会影响 TD 的宽度的优先级是
Table Width
Parent Element Width (and if none, Viewport)
Element(TD) Width.
桌子宽度
父元素宽度（如果没有，视口）
元素（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.
因此，如果设置了表格宽度，TD 将始终根据表格的宽度进行调整。但是，如果宽度未设置，“主要”宽度将是视口的真实宽度。除非 CSS 代码另有说明，否则这适用。并且只有当 TD 的总宽度小于视口的宽度时，才会考虑元素宽度。
Edit
编辑
Table width will always override TD width.
Stated TD width will only be followed until it exceeds viewport width, and viewport width will be taken as priority.
表格宽度将始终覆盖 TD 宽度。
指定的 TD 宽度只会在它超过视口宽度时才会遵循，视口宽度将被优先考虑。
回答by Md Riad Hossain
Actually the table width depends on the cell width when you do not specify the table width. But when you specify the table width it will ignore the td width. Look at the following example:
实际上，当您不指定表格宽度时，表格宽度取决于单元格宽度。但是当您指定表格宽度时，它将忽略 td 宽度。看下面的例子：
<table>
<tr>
<td>Column 1</td>
</tr>
<tr>
<td>Column 2</td>
</tr>
</table>
If you use
如果你使用
td {
width:500px;
}
then the table width will be 1000px.
那么表格宽度将为1000px.
But if you use
但是如果你使用
table {
width:500px;
}
td {
width:500px;
}
it will ignore the <td>width and the table width will be 500px.
它将忽略<td>宽度，表格宽度将为500px.
回答by Raman
According to the w3 Docs HereIt says "In the absence of any width specification, table width is determined by the user agent."
根据 w3 Docs Here它说“在没有任何宽度规范的情况下，表格宽度由用户代理确定。”
What I can think of it is tdwidth is always dependent on the table width. If you specify it or not. If you have a table with width 500pxand 2 TDs with width 200pxeach. Now after adding these 2 TDs in table there are 100pxremaining to accommodate so 50pxeach are added to both the TDs overwriting the original width property. See this link http://jsfiddle.net/rqmNY/7/
我能想到的是td宽度始终取决于表格宽度。如果指定与否。如果您有一个宽度的表格500px和 2 个宽度各异的 TD 200px。现在，在表中添加这 2 个 TD 后，还有100px剩余要容纳的内容，因此50px每个都添加到两个 TD 中，覆盖了原始宽度属性。请参阅此链接http://jsfiddle.net/rqmNY/7/
