CSS表格tr下邊框不顯示問題

table{
border-collapse: collapse;
}
td{
border-bottom: 1px solid #000;
}
tr:last-child td{
border-bottom: none;
}

在制作網(wǎng)頁表格的時(shí)候，有時(shí)候我們會(huì)遇到一個(gè)問題，那就是tr下邊框不顯示。這種情況通常發(fā)生在我們給td設(shè)置下邊框的時(shí)候，因?yàn)槟J(rèn)情況下tr的下邊框是重合在一起的。

那么如何解決這個(gè)問題呢？

我們可以通過CSS來解決。我們只需要給每一個(gè)td設(shè)置一條下邊框，然后給最后一行td去掉下邊框就可以了。

上面的代碼即實(shí)現(xiàn)了這個(gè)功能。首先，我們設(shè)置了table的邊框合并為collapse（合并邊框），這是重要的一步；然后我們?yōu)槊總€(gè)td設(shè)置了下邊框；最后一行的td我們通過選擇器:last-child去掉了下邊框。

通過這種方法，我們就可以很輕松地解決tr下邊框不顯示的問題了。