CSS THEAD TBODY 和 COLSPAN 的边界问题

Question

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

你有没有办法在 header 底部获得连续边框（不删除 thead 和 tbody) ?

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

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

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

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

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>

CSS THEAD TBODY 和 COLSPAN 的边界问题

CSS border issue with THEAD TBODY and COLSPAN

html

css

border

html-table

w3c