首页 文章

与THEAD TBODY和COLSPAN的CSS边界问题

提问于
浏览 次
4

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

Did you have a solution to get a continuous border on header bottom (without removing thead and 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>

 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>

 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>
html css border html-table w3c

2 回答

  • 0

    折叠边框之间的角落渲染似乎没有明确指定，因此不清楚这实际上是一个错误，而不仅仅是行为的变化 .

    我确实找到了一个可怕的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仅用于show . 实际上，position：absolute会导致伪元素显示：block，无论display属性是设置为table-row还是保留为默认内联 . 然后容器的表布局将该块包装在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>

     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>

     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>
    回复于
  • 0

    通过将边框从4px / 5px更改为1px，您可以对此进行虚幻的修复 . 至于为什么你必须要处理thead和tbody的属性，因为问题只发生在他们的存在 .

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

    回复于

相关问题