Question

我有一张桌子，桌子上有一个thead和一个tbody。我在thead上添加了边框底，在tbody的td上添加了背景色，似乎有一些出血。这仅在firefox中发生：

要求：

它在chrome firefox中看起来应该完全一样
您不能使用空单元格
边界崩溃无法更改

table {
  border-collapse:collapse;
  font-size:20px;
}
thead {
  border-bottom:20px solid green;
}
thead td {
  border-right :2px solid blue;
}
tbody td {
  background-color:red;
}

<table>
  <thead>
    <tr>
      <td rowspan="2">lorem</td>
      <td>lorem</td>
      <td>lorem</td>
      <td>lorem</td>
    </tr>
    <tr>
      <td>lorem</td>
      <td>lorem</td>
      <td>lorem</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="4">lorem</td>
    </tr>
  </tbody>
</table>

Answer 1

该错误似乎与以下事实有关：td中第一个tr中的tbody与{{1} }位于td中的最后tr中。这是由于thead导致的。

规避此问题的一种方法是将colspan="4"顶部的tr放在没人能看到的位置（因为它没有高度）。

tbody

table {
  border-collapse:collapse;
  font-size:20px;
}
thead {
  border-bottom:20px solid green;
}
thead td {
  border-right :2px solid blue;
}
tbody td {
  background-color:red;
}
tbody>tr:first-child{
  height: 0px;
}

或者也许..这种替代方式是我删除了底边框，但换成了绿色行。

<table>
  <thead>
    <tr>
      <td rowspan="2">lorem</td>
      <td>lorem</td>
      <td>lorem</td>
      <td>lorem</td>
    </tr>
    <tr>
      <td>lorem</td>
      <td>lorem</td>
      <td>lorem</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td colspan="4">lorem</td>
    </tr>
  </tbody>
</table>

table {
  border-collapse:collapse;
  font-size:20px;
}
thead td {
  border-right :2px solid blue;
}
tbody td {
  background-color:red;
}
th:last-child{
  height: 20px;
  background-color:green;
}

PS：标题中应使用<table> <thead> <tr> <td rowspan="2">lorem</td> <td>lorem</td> <td>lorem</td> <td>lorem</td> </tr> <tr> <td>lorem</td> <td>lorem</td> <td>lorem</td> </tr> <tr> <th colspan="4"></th> </tr> </thead> <tbody> <tr> <td colspan="4">lorem</td> </tr> </tbody> </table>而不是th

Firefox表格边框折叠出血

1 个答案: