Firefox 表格边框崩溃出血答案

【问题标题】：Firefox table border collapse bleed inFirefox 表格边框崩溃出血
【发布时间】：2019-01-02 12:05:34
【问题描述】：

我有一张桌子，桌子上有一张桌子和一张桌子。我在 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>

【问题讨论】：

为绿色添加一些不透明度或使其透明，您会看到更多奇怪的行为
问题是什么？
@RMo 问题是如何让结果在 Chrome 和 Firefox 中看起来一样。
如果我不想修改任何代码，修复 Firefox 上的错误的唯一方法是向 Mozilla 提交错误报告，以便他们最终解决。这可能需要一段时间。
@RMo 已经做了bugzilla.mozilla.org/show_bug.cgi?id=1478433

标签： css css-tables

【解决方案1】：

该错误似乎与以下事实有关@在thead。这是因为colspan="4"。

避免这个问题的一种方法是在tbody 的顶部放置一个tr，这样没人可以看到（因为它没有高度）。

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

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

PS：你应该在标题中使用th 而不是td

【讨论】：

@Stephen 要求没有空单元格吗？那么你应该将它添加到问题中。
我想还有其他方法。一个没有使用border-collapse: collapse。另一个是确保thead 的最后一个tr 中的相同th 和tbody 的第一个tr 中的td 具有完全相同的colspan职位。
@MrLister 我添加了一些要求