html - 为什么这个表格单元格会这样？

Question

看看这个 fiddle .

这是 td 的基本 CSS:

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

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

Answer 1

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

Whenever your td doesn't have any fixed width

由于您的表格有 width:100%，并且大多数 td 中没有内容，因此它们对齐到可忽略的宽度。但是，一旦您向任何 td 提供内容，整个列就会相应地扩展以适应表格的整个宽度。

为了测试它，甚至只需在任何其他 td 中写一个词，整个列就会展开。

您应该做的是为您的 TD 提供宽度以限制此默认扩展'

.ui-droppable
{
   width:50px;
}