CSS表格雙邊框是一個常見的問題,這種情況下表格會出現兩個相鄰的邊框,從而導致外觀不美觀。為了解決這個問題,我們需要使用CSS樣式去掉這個多余的邊框。
table { border-collapse: collapse; /* 重點:使用border-spacing去掉多余邊框 */ border-spacing: 0; } td, th { /* 設置單元格邊框 */ border: 1px solid #ddd; padding: 8px; } /* 去掉top和left邊框 */ td:first-child, th:first-child { border-left: none; } /* 去掉bottom和right邊框 */ td:last-child, th:last-child { border-right: none; border-bottom: none; }
代碼中使用border-collapse屬性來合并表格邊框,使用border-spacing屬性來設置表格邊框間的距離,通過設置邊框的樣式和單元格的padding來美化表格。最后,使用:first-child和:last-child偽類來去除多余的邊框。
上一篇css改變img圖片顏色
下一篇css改變字體樣式例子