Question

我的css / html表有问题：
当我使用带有colspan属性的 thead 和 tbody 标签时，标题的下边框会被分开。
间隙大小取决于 th 边框宽度。

您是否有解决方案在标题底部获得连续边框（不删除 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
}

＆＃13;

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
}

＆＃13;

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>

＆＃13;

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，无论display属性是否设置为table-row或保留默认值inline。容器的表格布局将导致该块包装在表格行和表格单元格的匿名表格对象中，以形成结构良好的表格。）}

＆＃13;

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

＆＃13;

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>

＆＃13;

与THEAD TBODY和COLSPAN的CSS边界问题

2 个答案: