影响单元格大小的表格边框答案

【问题标题】：Table border affecting cell size影响单元格大小的表格边框
【发布时间】：2011-03-15 04:20:11
【问题描述】：

谁能告诉我为什么当我将border=1 放在桌子上时会修复它的布局？

这就是问题所在：我编写了一些 JavaScript，使我成为了一个组织结构图。如果我在制作图表的表格周围放置一个边框，那么一切都会完美排列。如果我删除边框，一些线条的宽度变化很大（并且看似随机）。您会在连接组织结构图的红线中注意到这一点。

这是针对“border”的内联属性（如<table border="1">）。

这里有两个演示：

边框（不错，看起来都排好了）：http://andrewvantran.com/table1.html

没有边框（不好，全部错位）：http://andrewvantran.com/table2.html

我希望表格按照边框的方式布置，但我不想要边框！除非我保留边框（我不想要），否则我无法模拟带有边框的表格布局。有什么想法吗？

【问题讨论】：

【解决方案1】：

您是否将表格设置为border-collapse:collapse;？默认情况下，默认折叠是separate，其中单元格有自己的边界。如果您将其设置为折叠，它们会合并并且“看起来不错”

【讨论】：

【解决方案2】：

尝试将border-collapse: collapse; 添加到您的样式表中。在您的情况下，这似乎解决了很多问题。

除此之外，我建议您至少使用单元格的宽度。不同的浏览器处理单元格绘图的方式不同。如果您指定宽度，您可以更加确定单元格对齐。测试图表时，使用像 Firebug 这样的检查器工具来确定每个单元格的位置。这对你有很大帮助。

【讨论】：