Firefox CSS 表格额外边框线

发布于 2024-09-26 18:28:53 字数 1594 浏览 5 评论 0原文

我在 Firefox 中遇到了表格边框线 CSS 问题：当 CSS border-collapse 为 collapse 时，我有两个合并单元格，其中一个有 1px 边框。右侧存在多余的不需要的边界线。

其他浏览器不存在此问题，IE和Chrome没有此问题。

火狐版本是

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

diagram显示额外的边框线

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

原文

I encountered a table border line CSS problem in Firefox: when the CSS border-collapse is collapse, and I have two merged cells, one of them has a 1px border. An extra unwanted border line exists on the right.

This problem does not exist in other browsers, IE and Chrome don't have the problem.

Firefox version is

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)

My tested doctype is:

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

diagram showing extra border lines

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

强者自强 2024-10-03 18:28:53

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

I don't know if there is a better fix for it, but the problem lies with colspan and the use of border-collapse.

I re-wrote the code just because it looked messy to me, but basically the solution was to use border-spacing: 0; instead of border-collapse: collapse;

This isn't perfect because they aren't the same thing. So if all of your cells had borders on them then the ones inside the table would double up creating a 2px border.

However in that situation you wouldn't notice anything and you could use border-collapse anyway.

Well, I think I have said enough.

Here is my code (A little different from yours but it does the same thing):

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>

回复收藏 0 原文

~没有更多了~