TD类，非常困惑，数量越大，宽度越小？ [英] td class, very confused, larger number makes width smaller?
问题描述
这不是一个真正的问题，但我想知道发生了什么，所以我可以理解它。我目前正在编写一个新网站，要求我在设计的页脚中使用单个表格。 （我不经常使用它们，但这张表让这个项目的生活变得更加简单。）
我为表td使用CSS类只有元素是宽度：％;但出于某种原因，我无法理解，将百分比从10％提高到20％实际上使得td的宽度更小。完全倒退。
我真的被这个难住了，任何人都可以解释这一点吗？
干杯
p> HTML：
< div class = footertable >
< table border =2>
< tbody>
< tr>
< td valign =topclass =footer>
< div class =footerheading> SHOPPING< / div>
< / td>
< td valign =topclass =footer>
< div class =footerheading> CUSTOMER SERVICE< / div>
< / td>
< td valign =topclass =footer>
< div class =footerheading> PAYMENT OPTIONS< / div>
< / td>
< td valign =topclass =footer>
< div class =footerheading> SOCIAL< / div>
< / td>
< td valign =topclass =footer>
< div class =footerheading> ORDER< / div>
< / td>
< / tr>
< / tbody>
< / table>
< / div>
CSS： p>
.footertable {margin：auto; max-width：1080px;}
td.footer {width：10％;}
注释：
表格布局有其粉丝和仇恨，但有一点是肯定的，这是一种<高级机动。它就像力量的组合，一些弱化，一些更强，最终决定你的列宽。而且有很多输入变量：
- table-layout：固定或不是
- 表有一个特定的宽度（以像素或百分比或根本没有）
- 所有列都有宽度吗？
- 表中是否有colgroup元素？
- 该表有多少空间可用？
- 任何单元格都有不可破坏的内容吗？
ul>
对于缺乏经验的人来说，这是一场噩梦。
在特定的情况下，桌子没有特定的宽度，这意味着它将是列的宽度的总和。但是列的大小以百分比表示，这将是总表宽度的百分比。你可以看到这是一个鸡与鸡蛋的问题。
同样使用不加100％的百分比是不确定的。
我会后退一步，想想你准备实现的目标。
This isn't really a problem as such, but I would like to know what's going on so I can understand it. I'm currently coding a new website which has required me to use a single table in the footer of the design. (I don't often use them, but this table just makes life a lot easier for this project.)
I am using a CSS class for the tables td with the only element being width:%; but for some reason I just can't understand, increasing the % from 10% to 20% actually makes the td's smaller in width. totally backwards.
I'm really stumped by this one, can anyone explain this?
Cheers
HTML:
<div class="footertable">
<table border="2">
<tbody>
<tr>
<td valign="top" class="footer">
<div class="footerheading">SHOPPING</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">CUSTOMER SERVICE</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">PAYMENT OPTIONS</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">SOCIAL</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">ORDER</div>
</td>
</tr>
</tbody>
</table>
</div>
CSS:
.footertable { margin:auto; max-width:1080px;}
td.footer {width:10%;}
Notes:
- The strange behavior happens for percentages lower than 24: from 15 to 23 the total width decreases, and from 23 to 24 it suddenly expands. For percentages higher than 24, you have normal behavior.
- It doen't matter if you specify max-width or just width for the table
- The problem is reproduceable in chrome, firefox, opera and IE9
- jsFiddle here: http://jsfiddle.net/BPygA/
Table layout has its fans and haters, but one thing is for sure, it's an advanced maneuver. It's like a combination of forces, some weaker, some stronger, that ultimately determine your column widths. And there's a lot of input variables:
- table-layout:fixed or not
- Table has a specific width (in pixels or percent or not at all)
- Do all columns have widths?
- Is there a colgroup element in the table?
- How much space is available for the table?
- Do any cells have non-breakable content?
It's kind of a nightmare for the inexperienced.
In your particular situation you table has no specific width, meaning it'll be the sum of the widths of the columns. But the columns are sized in percentages, which would be percentages of the total table width. You can see this is a chicken-and-egg problem.
Also using percentages that don't add up to 100% is kind of undefined.
I'd take a step back and think about what you're trying to achieve exactly.
这篇关于TD类，非常困惑，数量越大，宽度越小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
