Question

请查看 fiddle 。

这是td的基本CSS：

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

有一个30px图像的单元格。但是，该单元的宽度为600px。有谁理解为什么？

Answer 1

与td内容和td没有内容有关。

Whenever your td doesn't have any fixed width

由于您的表格有width:100%，因此大多数td中都没有内容，因此它们的宽度可以忽略不计。但是只要你给任何一个td的内容，整个列都相应地扩展以适应表的整个宽度。

要测试它，只需在任何其他td中写一个单词，整个列就会扩展。

你应该做的是为你的TD提供一个宽度来限制这个默认扩展'

.ui-droppable
{
   width:50px;
}

Answer 2

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

Answer 3

如果您没有为<td>元素设置任何宽度，并且<table>没有任何宽度（因此默认为100％）<td> - s将自动填充整个宽度。在您的情况下，一个<td>会扩展。

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

td { width:30px; }

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