表格邊框的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; 
}