Question

您好我在谷歌浏览器中显示有问题。谷歌浏览器中还有其他显示行，但在IE和Dreamweaver中，没有这样的行。这个想法是给一个单元格3边框。我已经在代码片段中突出显示了此问题代码。

提前感谢您的帮助。

HTML代码段

table {
  width: 500px;
  border-collapse: separate;
  table-layout: fixed;
  border-spacing: 4px;
  border: 1px solid grey;
}

.ArrowCell {
  border-bottom: 1px solid red;
  border-top: 1px solid red;
  border-left: 1px solid red;
  border-right: 0;
}

<table>
          <tr>
            <td rowspan="3">&nbsp;</td>
            <td rowspan="2">&nbsp;</td>
            <td rowspan="2">&nbsp;</td>
            <td>&nbsp;</td>
            <td bgcolor="#C4E1FF"><b>resultw</b></td>
          </tr>
          <tr>
            <td rowspan="4" class="ArrowCell">&nbsp;</td>
            <td bgcolor="#F0F0F0"> sdf</td>
          </tr>
          <tr>
            <td bgcolor="#C4E1FF"><b>resut1</b></td>
            <td rowspan="2">&larr;</td>
            <td rowspan="2">&nbsp;</td>
          </tr>
          <tr>
            <td rowspan="7" class="ArrowCell">&nbsp;</td>
            <td bgcolor="#F0F0F0"> 345</td>
          </tr>
          <tr>
            <td rowspan="5">&nbsp;</td>
            <td rowspan="5">&nbsp;</td>
            <td bgcolor="#C4E1FF"><b>result</b></td>
          </tr>
          <tr>
            <td rowspan="3">&nbsp;</td>
            <td bgcolor="#F0F0F0"> sf</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td bgcolor="#C4E1FF"><b>rest</b></td>
          </tr>
          <tr>
            <td rowspan="5" class="ArrowCell">&nbsp;</td>  <If I remove the class="", then the whole line will disaapear-->

            <td bgcolor="#F0F0F0">sfd</td>
          </tr>
          <tr>
            <td bgcolor="#C4E1FF"><b>result 2</b></td>
            <td rowspan="2">&larr;</td>
            <td rowspan="3">&nbsp;</td>
          </tr>
          <tr>
            <td rowspan="5" style="border-left-color:#FFF">&nbsp;</td>
            <td bgcolor="#F0F0F0">4356 </td>
          </tr>
          <tr>
            <td rowspan="4">&nbsp;</td>
            <td rowspan="4">&nbsp;</td>
          </tr>
          <tr>
            <td bgcolor="#DFFFDF"><b>resultw</b></td>
          </tr>
          <tr>
            <td rowspan="2">&nbsp;</td>  
            <td bgcolor="#C4E1FF">avv</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
          </tr>
        </table>

尝试了一种不起作用的解决方案

将此类添加到带有附加行的单元格中。

.ArrowLeft {
    border-bottom: 2px solid white;
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid white;
}

Answer 1

<强>更新

虽然OP的问题可能看起来很专业，但这可能适用于任何在桌面上遇到顽固边界并且似乎无法摆脱它的人。

将以下内容添加到表格中：

Table {
    border-collapse: separate;
    border-spacing: 0;
    empty-cells: hide;
}

结果如下：http://jsfiddle.net/zer00ne/0Leqah5r

尝试：

.ArrowCell {
    border-top: 1px solid red;
    border-left:  1px solid red;
    border-bottom:  1px solid red;
    border-right: 0 solid transparent;
}

我在Chrome PC中没有看到额外的行，但是当我使用devtools进行检查时，.ArrowCell的计算样式报告为0.8px solid black;所以我猜测它的颜色会变为透明应该工作。

我想到了你的问题的另一种可能性。仔细检查并查看您的行窗口是否可能因相互交叉而发生冲突。

另一种可能的解决方法是将border-collapse: separate;更改为border-collapse: collapse;，也可以border-spacing: 0。

Chrome中的HTML显示IE中未显示的其他边框

1 个答案: