CSS表格中,經常會使用斜杠來實現某種特定的排列方式。而斜杠的使用要么是在表格的單元格中,要么是用于定義表格的邊框樣式。
table { border-collapse: collapse; } td { border: 1px solid black; border-right: none; border-bottom: none; } td:last-child { border-right: 1px solid black; } tr:last-child td { border-bottom: 1px solid black; } td:first-child { border-left: 1px solid black; } td:nth-child(odd) { background-color: #f2f2f2; } td:nth-child(even) { background-color: #e6e6e6; } td:nth-child(3n+1) { border-top: 1px solid black; }
如上所示的代碼,就使用了斜杠來表示一個表格的邊框樣式。在這個例子中,我們使用了border-collapse來使表格的邊框合并。然后,我們使用td選擇器來為單元格設置邊框。我們對邊框的樣式進行了細節的處理,使其都只有上、左、下三條邊。這樣可以在下一步的設置中更好地應用斜杠。
接著,我們利用css的nth-child選擇器,利用數學公式來設置邊框的樣式。例如,我們使用td:nth-child(3n+1)來表示每三個單元格的第一個單元格。這里我們使用了數學公式3n+1,也就是能夠整除3,余數為1的規律。
最后,我們利用CSS的background-color屬性,來為單元格設置不同的背景顏色。這樣就可以很好地區分每個單元格了。
上一篇css表格中的文本框
下一篇css表格不遮蓋背景圖片