CSS表格每行有下邊框是一個常用的樣式設計,可以讓表格更美觀、易讀。下面我們來介紹一種實現方式。
table { border-collapse: collapse; } td { border-bottom: 1px solid #ccc; }
代碼解析:
首先,我們給表格設置了邊框合并屬性(border-collapse),這樣就可以讓表格的邊框相鄰自動合并,避免累贅的邊框線。
然后,在
如果你希望每兩行之間有更明顯的分隔線,可以進一步調整樣式:
tr:nth-child(2n+1) td { border-bottom: 2px solid #ccc; }
代碼解析:
這行代碼使用了CSS選擇器nth-child,它會選擇每個表格中的奇數行(2n+1),并將這些行中的單元格下邊框調整為2像素寬,同時顏色保持不變。這樣就可以更明顯地將相鄰兩行區分開來。
經過以上的調整,你就可以在表格中實現每行擁有下邊框的效果了。這種設計不僅美觀、易讀,還能讓表格更具有層次感和結構性。
下一篇css搜索建議背景顏色