我在 Firefox 中遇到表格边框线 CSS 问题，当 CSS border-collapse 折叠时，有 2 个合并单元格，其中一个有 1px 边框。右侧存在额外不需要的边界线。 其他浏览器不存在此问题，IE和Chrome均无此问题。
FireFox 版本是
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8 (.NET CLR 3.5.30729)
我测试的文档类型是:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
.
<table cellspacing="0" cellpadding="0" style="position: absolute; width: 217px; left: 0px;border-collapse:collapse">
<colgroup><col col="0" style="width: 72px;"><col col="1" style="width: 72px;"><col col="2" style="width: 72px;">
</colgroup>
<tbody>
<tr tridx="0" style="height: 19px;">
<td rowspan="2" colspan="2" style="border: 1px solid #000000"></td><td row="0" col="2"></td>
</tr>
<tr tridx="1" style="height: 19px;"><td row="1" col="2"></td></tr>
<tr tridx="2" style="height: 19px;"><td row="2" col="0"></td><td row="2" col="1"></td><td row="2" col="2"></td></tr>
<tr tridx="3" style="height: 19px;"><td rowspan="3" colspan="2" style="border: 1px solid #000000"></td><td></td></tr>
<tr tridx="4" style="height: 19px;"><td ></td></tr>
<tr tridx="5" style="height: 19px;"><td></td></tr>
</tbody>
</table>
最佳答案
我不知道是否有更好的解决方法，但问题在于 colspan 和 border-collapse 的使用。
我重写了代码，因为它看起来很乱，但基本上解决方案是使用 border-spacing: 0; 而不是 border-collapse: collapse;
这并不完美，因为它们不是一回事。因此，如果您的所有单元格上都有边框，那么表格内的单元格将加倍创建一个 2px 边框。
但是在那种情况下你不会注意到任何东西，你仍然可以使用 border-collapse。
好吧，我想我已经说够了。
这是我的代码(与您的略有不同，但作用相同):
CSS:
<style type="text/css">
.tableStyle {
position: absolute;
left: 0px;
border-spacing: 0;
}
.tableStyle td {
height: 19px;
width: 72px;
}
.blackBorder {
border: 1px solid #000;
}
</style>
HTML:
<table class="tableStyle">
<tr>
<td rowspan="2" colspan="2" class="blackBorder">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td rowspan="3" colspan="2" class="blackBorder">7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
</table>
关于css - FireFox CSS 表格额外的边框线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3887427/