为什么这个表格单元的行为如此？

这是td基本CSS：

td { 
    height: 30px; 
    border: 1px solid grey; 
    background-color: rgb(141, 176, 248); 
}

还设有一个30像素的图像一个细胞。但是，该单元宽度仍为600px。有谁明白为什么？

你要什么表的样子？你没有在单元格上设置任何宽度属性，所以它正在做它想做的任何事情。 – SteveP 2013-03-07 13:59:59

Id不应以数字字符开头。但它与你的问题无关。 – Brainfeeder 2013-03-07 14:02:30

@Brainfeeder谢谢，我忘了那个... – 2013-03-07 14:40:33

它与具有内容的td和没有内容的td有关。

Whenever your td doesn't have any fixed width

由于表有width:100%，并且在大多数的TD的，因此他们对齐到可以忽略不宽内容。但是，只要你给任何td的内容，整个列都会相应地展开以适应整个表格的宽度。

要测试它，甚至只要在其他td中写一个字，整个列就会被扩展。

你应该做的是提供一个宽度您的预扣税，以限制此默认扩展”

.ui-droppable 
{ 
    width:50px; 
}

2013-03-07 14:18:08

是的，是有道理的。谢谢。 – 2013-03-07 14:38:32

您将宽度/高度设置为30px和1px边框。图像也有30px宽度。不幸的是，边框宽度必须包含在宽度中。您必须设置宽度30+2*1px：fiddle

2013-03-07 13:59:31 Imperative

他没有设置宽度，他确实设置了高度.. – Brainfeeder 2013-03-07 14:03:39

如果你没有任何宽度设置为<td>元素和你<table>还没有任何宽度（所以它默认为100％）<td> -s会自动补全宽。在你的情况下，这是一个<td>扩大。

在你的CSS文件中设置宽度，问题应该修复。

td { width:30px; }

很明显，您应该将表格宽度设置为所有列的总和。或者您可以设置px /％的表格宽度和％列中的宽度。或者你也可以使用javascript/jQuery来使列宽适应其内部的图像宽度。

2013-03-07 14:10:55 Brainfeeder

回答