FireFox CSS表格额外边框线_Css_Html Table_Border_Firefox3.6

FireFox CSS表格额外边框线

css

FireFox CSS表格额外边框线,css,html-table,border,firefox3.6,Css,Html Table,Border,Firefox3.6,我在Firefox中遇到了一个表格边框行CSS问题，当CSS边框折叠为collapse时，有两个合并的单元格，其中一个有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是： <!DOC

我在Firefox中遇到了一个表格边框行CSS问题，当CSS边框折叠为collapse时，有两个合并的单元格，其中一个有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是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

我不知道是否有更好的修复方法，但问题在于

colspan

和

边框折叠的使用
我重新编写代码只是因为它看起来很凌乱，但基本上解决方案是使用边框间距：0而不是边框折叠：折叠
这并不完美，因为它们不是一回事。因此，如果所有单元格上都有边框，那么表中的单元格将折叠起来，创建一个2px边框
但是，在这种情况下，您不会注意到任何东西，而且您可以使用边框折叠

嗯，我想我已经说得够多了
以下是我的代码（与您的代码稍有不同，但功能相同）：
CSS:

.表格样式{
位置：绝对位置；
左：0px；
边界间距：0；
}
.表样式td{
高度：19px；
宽度：72px；
}
.黑秩序{
边框：1px实心#000；
}

HTML:

1.
2.
3.
4.
5.
6.
7.
8.
9
10
我测试的doctype是：，由editplus自动生成。感谢您的清晰解释和良好建议。事实上，并不是我所有的细胞都有边界，但有些细胞，这要看情况而定。若我使用“边框折叠：折叠”，表格将加倍创建2px边框，否则其他无边框的单元格将有多余的多余边框。
<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>

<style type="text/css">
.tableStyle {
 position: absolute;
 left: 0px;
 border-spacing: 0;
}
.tableStyle td {
 height: 19px;
 width: 72px;
}
.blackBorder {
 border: 1px solid #000;
}
</style>

<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>