在網頁設計中,表格是常用的布局方式之一,但是沒有美觀的表頭分割線會使表格顯得很呆板。這時候,我們可以使用CSS來實現表頭分割線的效果。
table{ border-collapse: collapse; //使表格邊框合并 } thead th { height: 50px; //設置表頭高度 background-color: #F5F5F5; //表頭背景色 border-bottom: 1px solid #CCCCCC; //底部邊框 } thead th:last-child { border-right: none; //去掉最后一個表頭單元格的右邊框 } tbody td { height: 40px; //設置表格內容高度 border-bottom: 1px solid #CCCCCC; //底部邊框 } tbody td:last-child { border-right: none; //去掉最后一個表格單元格的右邊框 }
以上代碼中,我們針對表頭和表格內容的不同設置了不同的樣式。通過設置表頭的背景色、高度和底部邊框,使表頭與表格內容有明顯的區分;通過去掉最后一個單元格的右邊框,使整個表格更加整潔。
雖然CSS表格的樣式可以自由設置,但要注意設計時要注重實用性,避免過于花哨的樣式影響表格的使用效果。