表格边框的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单元格中。

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

Answer 2

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

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