THEAD TBODY 和 COLSPAN 的 CSS 边框问题

Question

我对 css/html 表有疑问：
当我使用带有 colspan 属性的 thead 和 tbody 标记时，标题的底部边框被分割。
间隙大小取决于 th 边框宽度。

您是否有解决方案在标题底部获得连续边框（不删除 thead 和 tbody）？

JSFiddle example

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>

Answer 1

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

我确实为 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 只是为了展示。实际上，position:absolute 导致伪元素为display:block，无论显示属性设置为table-row 还是保留在默认inline。容器的表格布局将导致该块被包裹在table-row和table-cell的匿名表格对象中，以形成一个结构良好的表格。）}

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>

Answer 2

您可以通过将边框从 4px/5px 更改为 1px 来解决此问题。至于为什么你得到那必须处理 thead 和 tbody 的属性，因为问题只发生在它们的存在。

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