在CSS中,我們可以通過設置邊框來美化HTML表格的外觀,其中‘table’元素的邊框屬性可以設置整個表格的邊框樣式,而單元格(td和th)的邊框屬性則控制每個單元格的邊框樣式。
table { border-collapse: collapse; border: 1px solid black; } td, th { border: 1px solid black; padding: 10px; }
在上面的示例中,使用了‘border-collapse’屬性來合并表格邊框,使表格看起來更加整潔。‘border’屬性則設置表格的邊框樣式,包括線寬和線條顏色。‘td’和‘th’元素的‘border’屬性設置每個單元格的邊框樣式,‘padding’屬性則控制單元格內文本與單元格邊框的距離
我們還可以通過選擇器控制不同的單元格有不同的邊框樣式:
/* 縱向邊框 */ td:first-child, th:first-child { border-left: none; } td:last-child, th:last-child { border-right: none; } /* 橫向邊框 */ tr:first-child td, tr:first-child th { border-top: none; } tr:last-child td, tr:last-child th { border-bottom: none; }
在上例中,使用了‘first-child’和‘last-child’選擇器來控制首尾單元格的邊框,一個單元格同時設置兩個邊框,就能形成完整的邊框。其他的選擇器則控制表頭和表尾行的邊框樣式。
最后,如果想要給單元格加上斑馬線樣式,則可以使用偽類選擇器‘nth-child(even/odd)’:
tr:nth-child(even) { background-color: #f2f2f2; }
在這個示例中,選擇器作用于表格的每個偶數行,將背景顏色設置為灰色的斑馬線樣式。
下一篇table斜杠css