CSS边框问题：THEAD、TBODY和COLSPAN

Question

我遇到了一个CSS/HTML表格的问题：
当我在thead和tbody标签中使用colspan属性时，标题的底部边框会被分开。
间隙大小取决于th边框宽度。 您是否有解决方案可以使标题底部的边框连续（而无需删除thead和tbody）？ JSFiddle示例

table {
  border-collapse: collapse;
}

th {
  border: 4px solid red;
  border-bottom: 4px solid black
}

td {
  border: 4px solid blue;
}

thead tr {
  border-bottom: 5px solid green
}

table {
  border-collapse: collapse;
}

th {
  border: 4px solid red;
  border-bottom: 4px solid black
}

td {
  border: 4px solid blue;
}

thead tr {
  border-bottom: 5px solid green
}

with THEAD and TBODY but without COLSPAN
<table>
  <thead>
    <tr>
      <th>
        Column 1
      </th>
      <th>
        Column 2
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Content 1
      </td>
      <td>
        Content 2
      </td>
    </tr>
  </tbody>
</table>
<br /> COLSPAN with THEAD and TBODY <span style="background:yellow">(css bug in the middle of green border ?)</span>
<table>
  <thead>
    <tr>
      <th>
        Column 1
      </th>
      <th>
        Column 2
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">
        Content 1 and 2 (merged cells)
      </td>
    </tr>
  </tbody>
</table>
<br /> COLSPAN without THEAD and TBODY
<table>
  <tr>
    <th>
      Column 1
    </th>
    <th>
      Column 2
    </th>
  </tr>
  <tr>
    <td colspan="2">
      Content 1 and 2 (merged cells)
    </td>
  </tr>
</table>

- vingran

---

你的需求意味着你确切想要什么。请明确表达。 - Akhilesh Kumar

你在哪个浏览器遇到了问题？ - Alejandro Veltri

@rewobs 我在Mozilla中看到了OP的问题，而不是在Chrome中。截图。看起来像是一个错误。找不到解决方案或变通方法。 - Mr Lister

是的，问题出在Mozilla浏览器上。在Chrome浏览器中没有问题。我需要一个连续的边框来分隔表头和表格主体。 - vingran

Answer 1

你可以通过将边框从4px/5px更改为1px来解决这个问题。至于为什么会出现这种情况，可能与thead和tbody的属性有关，因为只有它们存在时才会出现问题。

参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead

- Lansana Camara

---

我的网站正确版本的垂直边框大小为1像素。我将其设置为4像素以突出显示问题。 我使用thead和tbody，因为它们是所使用的javascript表格排序脚本所需的。 - vingran

Answer 2

折叠边框之间的角渲染似乎没有很好地指定，因此不清楚这实际上是一个错误，而不仅仅是行为上的差异。

我在Firefox中找到了一个可怕的解决方法，通过在thead中创建一个伪第二行，然后隐藏它，并且像这样隐藏第一个tbody行的顶部边框：

thead:after {
    content:'';
    display:table-row;  /* see note below */
    position:absolute;
    visibility:hidden;
}

tbody tr:first-child td {
    border-top-width:0;
}

_{（请注意，display:table-row只是为了显示。实际上，无论显示属性设置为table-row还是保留默认的inline，position:absolute都会导致伪元素呈现为display:block。容器的表格布局将会自动在该块周围包裹匿名表格对象，形成结构良好的表格。）}

table {
  border-collapse: collapse;
}

th {
  border: 4px solid red;
  border-bottom: 4px solid black
}

td {
  border: 4px solid blue;
}

thead tr {
  border-bottom: 5px solid green
}

table ~ table thead:after {
    content:'';
    position:absolute;
    visibility:hidden;
}
table ~ table tbody tr:first-child td {
    border-top-width:0;
}

with THEAD and TBODY but without COLSPAN
<table>
  <thead>
    <tr>
      <th>
        Column 1
      </th>
      <th>
        Column 2
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Content 1
      </td>
      <td>
        Content 2
      </td>
    </tr>
  </tbody>
</table>
<br /> COLSPAN with THEAD and TBODY <span style="background:yellow">(css bug in the middle of green border ?)</span>
<table>
  <thead>
    <tr>
      <th>
        Column 1
      </th>
      <th>
        Column 2
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">
        Content 1 and 2 (merged cells)
      </td>
    </tr>
  </tbody>
</table>
<br /> COLSPAN without THEAD and TBODY
<table>
  <tr>
    <th>
      Column 1
    </th>
    <th>
      Column 2
    </th>
  </tr>
  <tr>
    <td colspan="2">
      Content 1 and 2 (merged cells)
    </td>
  </tr>
</table>

- Alohci