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

Question

考虑以下代码

table {
  border-collapse: collapse;
}

td {
  border: 1px solid red;
}

td.nb {
  border: 0 !important;
}

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

我希望第 "Bar" 列没有边框，但由于某些原因带有边框（顶部+底部）

如何去除边框？

代码笔：https://codepen.io/anon/pen/rwLQWG

Answer 1

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

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

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

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

td {
  border: 1px solid red;
}

td.nb {
  border: 0 !important;
}

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

Answer 2

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

April 1 2014

It's a known (old) issue in our table code. Collapsing borders are determined based on adjacent cells and our code doesn't deal correctly with spanning cells (we only consider the cell adjoining the first row / column in a row / column span). On top of that, our border granularity is determined by the cell's span.

To fix this bug, we would need to overhaul our collapsing border code, which is a big undertaking.

（感谢 Paolo Forgia's alternate ，这是第一个注意到 Chromium 线程的人。）

分隔边框是一种选择，但我知道我个人不喜欢使用分隔的单元格边框；您运行遇到了其他每个单元格都必须在一侧有边框的问题，这变得非常令人头疼，更不用说 CSS 标记的卷积了。

一种可以让您保留可折叠边框的解决方法如下所示。它在单元格中创建一个伪元素，用白色边框覆盖红色边框。

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

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

Answer 3

删除 border-collapse 并将 cellspacing=0 和 cellpadding=0 添加到您的 table。然后将您的 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>

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

Can't remove border because of colspan in Chrome

html

css

css-tables