为什么TD宽度不工作或不遵循？ | 为什么TD宽度不工作或不遵循

本文介绍了为什么TD宽度不工作或不遵循？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

原始问题：HTML < table> 是否有默认宽度？

最近有人问这个问题的某个地方，让我想知道。

以这个为例。

在这个小提琴中，如果你要检查它的宽度（我使用chrome的inspect元素），它显示

 
 
 允许添加更多的td，我们将看到 td：100px css被忽略。
 
 
   
 
 
 正如你所看到的，现在是83px，而不是<$ 
 
 
 但是让我们回到更少的TD（7），我添加了一个每个TD元素（500像素）的宽度更宽，结果是td的宽度停留在 119px 。
 
 
   
 
 
 最后，假设我有一个宽度为2000px的表，td为 100px  width和许多td元素。 
  
 
 
 现在表宽度覆盖TD宽度，并将td的宽度扩展为 222px 。
 
 
 任何人都可以解释这种行为吗？
 
 
  ps注意，在所有情况下，inspect元素工具告诉我，宽度总是对应于css，它只是最终结果不能正确显示。
解决方案
 我高度相信这个问题的答案是：
 
 
 影响TD的宽度的优先级是
 
 
  表格宽度
 
 
  父元素宽度（如果没有，Viewport）
 
        表格宽度设置，TD将始终调整为表格的宽度。但是，如果宽度未设置，主宽度将是视口的宽度。除非CSS代码另有规定，否则这是真的。只有当TD的总宽度小于视口的宽度时，才会考虑元素宽度。
 
 
  编辑 / p> 
  
  表格宽度将永远覆盖TD宽度。指定的TD宽度只会跟随，直到它超过视口宽度，并且视口宽度将被视为优先。
 
 
  
Original question: Does HTML <table> have a default width?
Recently someone asked a question somewhere along these lines, and got me wondering.
Take this for example. 
http://jsfiddle.net/rqmNY/1/
In this fiddle, if you were to check its width (I'm using inspect element from chrome), it shows 100px, working as intended.
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/
As you can see, now it's 83px instead of 100px as originally intended.
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/
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/
Now the table width overrides the TD width, and expands the td's width to 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.
 解决方案 
I highly believe the answer to this question is such:
The priority of widths that will affect the TD is 
Table Width
Parent Element Width (and if none, Viewport)
Element(TD) Width.
Hence if the table width is set, the TD's will ALWAYS adjusted to the width of the table. However, if the width is unset, the "main" width will be the 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.
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宽度不工作或不遵循？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！