Question

我遇到了Firefox中的表边框线CSS问题，当CSS边框折叠崩溃时，有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是：

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

alt text

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

Answer 1

我不知道是否有更好的解决方法，但问题在于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>

FireFox CSS表额外边界线

1 个答案: