在Firefox中顯示錶格底部邊框但未在Chrome中顯示

我有以下html和CSS，旨在將顯示在桌面瀏覽器中的寬列作爲任意小屏幕設備的底部行。這很有效。但是，當我用Firefox（在桌面瀏覽器上）查看它時，我的表格底部有一個邊框，但是當我使用Chrome查看它時，我不會。在Firefox中顯示錶格底部邊框但未在Chrome中顯示

請注意border-bottom：0px;是必要的，這樣在大屏幕上顯示在小設備上的兩行代替單行不應該在它們之間具有水平線。

作爲一個更簡單的問題版本，我已經完全刪除了td的所有邊框屬性，並且只依賴於tbody邊框，並且它仍然不起作用。所以顯然它不是邊界底部：0px;屬性導致Chrome忽略了底線。

.big-small-table { 
 
    border-collapse: collapse; 
 
} 
 
.big-small-table th { 
 
    border: thin solid; 
 
    padding: 3px 10px; 
 
} 
 
.big-small-table td { 
 
/*border: thin solid;*/ 
 
/*border-bottom:0px;*/ 
 
/*border-top:0px;*/ 
 
    padding: 3px 10px; 
 
} 
 
.big-small-table tbody { 
 
    border: thin solid; 
 
} 
 

 
.desc-big-screen { 
 
    display:table-cell; 
 
} 
 

 
.desc-small-screen { 
 
    display:none; 
 
} 
 

 
@media only screen and (max-device-width: 400px) { 
 
    .desc-big-screen { 
 
    display:none; 
 
    } 
 

 
    .desc-small-screen { 
 
    display:table-cell; 
 
    } 
 
}

<body> 
 
<table class="big-small-table"> 
 
    <tr> 
 
     <th>Type</th> 
 
     <th class="desc-big-screen">Description</th> 
 
     <th>Data</th> 
 
    </tr> 
 
    <tbody> 
 
    <tr> 
 
     <td>Small</td> 
 
     <td class="desc-big-screen">This is the description of something small.</td> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr><td colspan="2" class="desc-small-screen">This is the description of something small.</td></tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>Medium</td> 
 
     <td class="desc-big-screen">This is the description of something medium.</td> 
 
     <td>5</td> 
 
    </tr> 
 
    <tr><td colspan="2" class="desc-small-screen">This is the description of something medium.</td></tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>Large</td> 
 
     <td class="desc-big-screen">This is the description of something large.</td> 
 
     <td>50</td> 
 
    </tr> 
 
    <tr><td colspan="2" class="desc-small-screen">This is the description of something large.</td></tr> 
 
    </tbody> 
 
</table> 
 
</body>

有誰知道我可以在我的桌子的底部使邊界出現在瀏覽器中呢？

來源

2016-11-07 Morag Hughson

在我通過明確地把邊界上的所有TD在大屏幕模式下，每個TBODY的第一行中的同一個邊境小屏幕模式明確設置爲零，解決它的結束。這很醜陋，但至少我現在有一個Chrome的解決方法，忽略了桌子底部的tbody邊框！

.big-small-table { 
 
    border-collapse: collapse; 
 
} 
 
.big-small-table th { 
 
    border: thin solid; 
 
    padding: 3px 10px; 
 
} 
 
.big-small-table td { 
 
    border-left: thin solid; 
 
    border-right: thin solid; 
 
    padding: 3px 10px; 
 
} 
 
.big-small-table tbody { 
 
    border: thin solid; 
 
} 
 
.big-small-table tbody tr:first-child td { 
 
    border-bottom: thin solid; 
 
} 
 
.desc-big-screen { 
 
    display:table-cell; 
 
} 
 

 
.desc-small-screen { 
 
    display:none; 
 
} 
 

 
@media only screen and (max-device-width: 400px) { 
 
    .big-small-table tbody tr:first-child td { 
 
    border-bottom: 0px; 
 
    } 
 
    .desc-big-screen { 
 
    display:none; 
 
    } 
 

 
    .desc-small-screen { 
 
    display:table-cell; 
 
    } 
 
}

<body> 
 
<table class="big-small-table"> 
 
    <tr> 
 
     <th>Type</th> 
 
     <th class="desc-big-screen">Description</th> 
 
     <th>Data</th> 
 
    </tr> 
 
    <tbody> 
 
    <tr> 
 
     <td>Small</td> 
 
     <td class="desc-big-screen">This is the description of something small.</td> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr><td colspan="2" class="desc-small-screen">This is the description of something small.</td></tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>Medium</td> 
 
     <td class="desc-big-screen">This is the description of something medium.</td> 
 
     <td>5</td> 
 
    </tr> 
 
    <tr><td colspan="2" class="desc-small-screen">This is the description of something medium.</td></tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>Large</td> 
 
     <td class="desc-big-screen">This is the description of something large.</td> 
 
     <td>50</td> 
 
    </tr> 
 
    <tr><td colspan="2" class="desc-small-screen">This is the description of something large.</td></tr> 
 
    </tbody> 
 
</table> 
 
</body>

來源

2016-11-07 08:11:41

在Firefox中顯示錶格底部邊框但未在Chrome中顯示

回答

相關問題