表边框css在浏览器之间表现不同

Question

我试图创建一个缺少列的表，以便并排显示两个表的错觉。 This 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属性。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

设置visibility:hidden是不够的。您应该使用border: none添加!important来覆盖表格的border定义：

table.table1.hidden {
    visibility: hidden;
    border: none !important;
}