由于Chrome中的colspan，无法移除边框

Question

考虑以下代码

＆＃13;

＆＃13;

table {
  border-collapse: collapse;
}

td {
  border: 1px solid red;
}

td.nb {
  border: 0 !important;
}

＆＃13;

<table>
  <tr>
    <td class="nb" colspan="3">Foo</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td>World</td>
    <td class="nb">Bar</td>
  </tr>
  <tr>
    <td class="nb" colspan="3">Foo</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

我想要专栏＆＃34; Bar＆＃34;没有边框，但出于某种原因带边框（顶部+底部）

如何删除边框？

Codepen：https://codepen.io/anon/pen/rwLQWG

Answer 1

它是一个known Chrome issue，而且非常烦人。

  

2014年4月1日

     

这是我们的表格代码中已知（旧）的问题。折叠边界是基于相邻单元确定的，并且我们的代码没有正确处理生成单元（我们只考虑与行/列跨度中的第一行/列相邻的单元）。最重要的是，我们的边界粒度由单元格的跨度决定。

     

要修复此错误，我们需要彻底检查崩溃的边界代码，这是一项艰巨的任务。

（感谢Paolo Forgia的候补answer，这是第一个注意到Chromium主题的人。）

分离边框是一种选择，但我知道我个人讨厌使用分离的单元格边框。你遇到的问题是每个其他单元只有一个站点上的边框，这就变得非常头疼了，更不用说CSS标记的卷积了。

使您可以保留可折叠边框的解决方法类似于下面的方法。它在单元格中创建一个伪元素，用白色覆盖红色边框。

＆＃13;

＆＃13;

body {
    background: white;
}

table {
  border-collapse: collapse;
}
td {
  border: 1px solid red;  
}
td.nb {
  border: 0 !important;
}

/* New class for cells affected by this issue */
td.nbtb {
  position: relative;
  border: 0 !important;
}

/* Pseudo-element to cover up the borders */
td.nbtb::after {
  position: absolute;
  top: 0px;
  left: 0px;
  display: block;
  content: '';
  width: 100%;
  height: calc(100% + 1px);
  border: 1px solid white;
  box-sizing: border-box;
}

＆＃13;

<table>
  <tr>
    <td class="nb" colspan="3">Foo</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td>World</td>
    <td class="nbtb">Bar</td>
  </tr>
  <tr>
    <td class="nb" colspan="3">Foo</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

已知（和旧）bug of Chrome影响版本33.0.1750.154或更高版本。

作为解决方法，您可以使用：

border-collapse: separate;
border-spacing: 0;

＆＃13;

＆＃13;

table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  border: 1px solid red;
}

td.nb {
  border: 0 !important;
}

＆＃13;

<table>
  <tr>
    <td class="nb" colspan="3">Foo</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td>World</td>
    <td class="nb">Bar</td>
  </tr>
  <tr>
    <td class="nb" colspan="3">Foo</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

删除border-collapse并将cellspacing=0和cellpadding=0添加到您的表格中。然后将CSS更改为以下内容......

td {
  border-color: red;
  border-style: solid;
  border-width: 1px 0 1px 1px;  
}

td:nth-last-child(2) {
  border-right: 1px solid red;
}

td.nb {
  border: 0 !important;
}

<table cellspacing=0 cellpadding=0>
  <tr>
    <td class="nb" colspan="3">Foo</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td>World</td>
    <td class="nb">Bar</td>
  </tr>
  <tr>
    <td class="nb" colspan="3">Foo</td>
  </tr>
</table>