行跨度旁边的单元格上的 Firefox 表格边框问题

Question

我有一个表格，仅在内部单元格上有左右边框，以下是我拥有的标记和 CSS：

table {
  border-collapse: collapse;
}

td {
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  border-top: 1px solid #aaa;
  padding: 10px;
}

td:first-child {
  border-left: 0;
}

<table>
  <tbody>
    <tr>
      <td rowspan="2">Cell with Rowspan</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </tbody>

在 Chrome 中输出正常，但 Firefox 和 IE（当前版本）不显示第二行单元格的左边框

我的 CSS 实现方式是否有问题，还是应该只在第二行使用类？

这是working preview in codepen

Answer 1

这是因为first-child 选择器清除了左边框：

td:first-child {
    border-left: 0;
}

应用于第二行的第一个单元格：

这实际上感觉像是对规范的合理解释。

如果您可以更改标记，则可以通过手动将类添加到您希望有左边框的任何单元格来更容易地解决问题，但这不是很干净。

我想不出任何办法让第二行上的选择器知道第一行子级上的rowspan 以便有条件地删除左边框。

设置为none 或1px solid white 的任何表格边框都将位于内部单元格的表格边框后面（当border-collapse 设置为collapse 时），因此您不能只为每个单元格设置边框然后从桌子边缘移除。

Answer 2

我只是添加属性border="1" cellspacing="0" cellpadding="0" 和样式

border-collapse: collapse;
border-color: blue;
border: none;

致<table>

只是

border-color: blue; 在td

查看此链接。

codepen

Answer 3

您的边界定义似乎有点太复杂了。如果你只使用border: 1px solid #aaa;（对于所有边框，由于border-collapse: collapse不会产生任何重复的边框）和border-left: none;对于td:first-child，结果显示为所需的：

table {
  border-collapse: collapse;
}

td {
  border: 1px solid #aaa;
  padding: 10px;
}

td:first-child {
  border-left: none;
}

<table>
  <tbody>
    <tr>
      <td rowspan="2">Cell with Rowspan</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </tbody>