Question

我有一个CSS规则：

#map td {
    border: medium none;
    height: 32px;
    margin: 0;
    padding: 0;
    width: 32px;
}

我在一个名为map的元素中有一个表。该表的每个单元格应包含大小为32x32像素的图像。但是当我在Firefox或Chrome中渲染它时，地图网格在某些情况下会严重受损。

在Firebug中检查它，我发现样式都正确应用，#map td样式作为相关单元格的主导规则，但是当我查看Computed选项卡时，它会给出{{{ 1}}属性（在“Box Model”下）为14.6167px。如果我扩展width节点，其下唯一的东西是：width，所以我有点不知道是什么导致我的所有列都比32 px窄得多。

我很抱歉这不是很多，但我还是相当新的CSS，所以我不知道很多正确的问题要问。有谁知道会导致这样的事情发生的原因，以及我如何处理它？</ p>

更新：经过一些实验，尝试将其缩小到一个简单，可重复的测试用例，似乎边栏div正在“挤压”主要div并且还不够房间，所以浏览器使主要的更窄，因为当我删除侧边栏时，一切都回到正确的宽度。所以现在的问题是，如何设置它以使表格的宽度强制如上所述，并且不能被其他元素挤压到它的一边？

Answer 1

保持你的td / th具有你已经完成的定义宽度。

对于您的表格，将布局设置为固定，您还必须定义固定宽度。

table{
    table-layout: fixed;
    width: 64px;
    }

什么可能导致表列最终比它们的定义更窄？

1 个答案: