html - 表格边框 css 在浏览器之间的行为不同

Question

我正在尝试创建一个缺少列的表格，以产生两个表格并排的错觉。 This fiddle (转载如下)显示了我当前的代码。

fiddle 在 Chrome 58.0.3029.110 和 Opera 45.0 中提供了所需的输出:

但是，Firefox 53.0.3 和 IE11 的输出是:

知道如何说服所有 4 个浏览器显示顶部图像吗？

我试过各种变体

table.table1 tr.totals td.hidden {
  border-top : none;
}

但没有成功。在 Firefox 上，关闭 collapse 会修复边框，但所有单元格都会分开。

这是代码，因为 SO 需要它:

<table class='table1'>
<tbody>
<tr>               <td>1</td><td>2</td><td class='hidden'></td><td>3</td></tr>
<tr class='totals'><td>4</td><td>5</td><td class='hidden'></td><td>6</td></tr>
</tbody>
</table>

.table1 {
    border-collapse : collapse;
}
table.table1 td {
  background-color : #e5e5e5;
  padding : 3px 6px 6px 3px;
  border : 1px solid #7f7f7f;
}
table.table1 .hidden {
  visibility : hidden;
}
table.table1 .totals {
  border-top : 3px double #7f7f7f;
}

Answer 1

我建议将双边框添加到 .totals 行中每个单元格的顶部(而不是跨越整行)，然后设置 border: none 属性在 .hidden 单元格中。

.table1 {
    border-collapse : collapse;
}
table.table1 td {
  background-color : #e5e5e5;
  padding : 3px 6px 6px 3px;
  border : 1px solid #7f7f7f;
}
table.table1 .totals td {
  border-top : 3px double #7f7f7f;
}
table.table1 .hidden {
  visibility : hidden;
  border: none !important;
}

<table class='table1'>
<tbody>
<tr>               <td>1</td><td>2</td><td class='hidden'></td><td>3</td></tr>
<tr class='totals'><td>4</td><td>5</td><td class='hidden'></td><td>6</td></tr>
</tbody>
</table>