html - 为什么这个表格单元格的行为是这样的？

Question

看看这个小提琴。

这是基本的CSS td：

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

有一个带有 30 像素图像的单元格。但是，该单元格的宽度仍然是 600 像素。有谁明白为什么？

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：小提琴

Answer 3

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

在你的css文件中设置宽度，问题应该得到解决。

td { width:30px; }

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