Firefox中的摺疊表格邊框有時會丟失

HTML規範允許在表格中使用multipletbody元素。我有一個像Firefox那樣似乎不想處理摺疊邊界的情況。Firefox中的摺疊表格邊框有時會丟失

正常在Chrome 37中的第二臺顯示器上的邊界，但在Firefox 33或Internet Explorer不這樣做熱11

基本上，它看起來像如果有任何tbody （僅包含？）隱藏的內容，則無法正確呈現整個表格的邊框。

有沒有一種解決方法可以正確繪製邊框？

我試過沒有崩潰的邊界，這似乎工作，但留下這個特定的表看起來不同於網站上的其他表。對於小提琴

代碼示例上面鏈接：

With multiple `tbody` elements: 
<table class="mainContent"> 
    <thead><tr><th>hi</th><th>there</th></tr></thead> 
    <tbody><tr><td>hi</td><td>there</td></tr></tbody> 
    <tbody><tr><td>hi</td><td>there</td></tr></tbody> 
    <tbody><tr><td>hi</td><td>there</td></tr></tbody> 
    <tbody><tr><td>hi</td><td>there</td></tr></tbody> 
    <tbody><tr><td>hi</td><td>there</td></tr></tbody> 
</table> 
<br /> 
<br />

如果任何tbody元素包含一個display: none排那麼事情出差錯：

<table class="mainContent"> 
    <thead><tr><th>hi</th><th>there</th></tr></thead> 
    <tbody><tr><td>hi</td><td>there</td></tr></tbody> 
    <tbody><tr class="hide"><td>hi</td><td>there</td></tr></tbody> 
    <tbody><tr><td>hi</td><td>there</td></tr></tbody> 
    <tbody><tr><td>hi</td><td>there</td></tr></tbody> 
    <tbody><tr><td>hi</td><td>there</td></tr></tbody> 
</table>

而且款式：

table { 
    border-collapse: collapse; 
} 
table tr td { 
    border: solid 1px #ccc; 
    padding: 4px; 
} 
.hide { 
    display: none; 
}

來源

2014-11-04 jinglesthula

我很好奇關於離題的近距離投票。這似乎是一個關於具體編程情況的有效問題。 – jinglesthula 2014-11-05 21:53:55

我遇到同樣的問題。你有沒有找到解決方法或解決？ thx – Clayton 2014-12-21 16:16:58

對不起 - 我從事這項工作已經有一段時間了。我不記得我是否曾經爲它找到過修補程序。我想我現在決定和它一起生活（不太理想）。 – jinglesthula 2014-12-22 18:35:36

這是一個非常奇怪的行爲，可能是我的一個Bug小齒輪。

我嘗試了一些解決方法，並首次成功的一個解決它適用.hide類tbody標籤，而不是比TR，但轉念一想，可能你有一些理由，它適用於錶行，所以我轉過身來「子代選擇器」技術。

Look at this updated example。唯一的區別是顯示：沒有應用於TD，同時繼續在HTML中將.hide類設置爲TR。

.hide td { 
    display: none; 
}

來源

2015-01-28 14:06:24

Firefox中的摺疊表格邊框有時會丟失

回答

相關問題