Firefox表边框问题在rowspan旁边的单元格上

Question

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

HTML

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

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

输出在Chrome中正常工作，但Firefox和IE（当前版本）没有显示第二行中单元格的左边框，我是如何实现CSS的问题，或者我应该只使用类第二排？

这是一个有效的预览：http://codepen.io/anon/pen/osBrg/

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，则结果将按需要显示：< / p>

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>