CSS中有一個很方便的屬性可以設置表格的間隔行,那就是nth-child
。利用這個屬性可以輕松設置表格中每間隔多少行要加上一個特定的樣式類,從而實現行間隔效果。
/* 設置奇數行樣式 */ tr:nth-child(odd) { background-color: #f2f2f2; } /* 設置偶數行樣式 */ tr:nth-child(even) { background-color: #ffffff; }
上面的代碼中,我們通過設置tr
元素的nth-child
偽類選擇器來設置奇數行和偶數行的樣式。屬性值為odd
時代表選擇奇數行,屬性值為even
時代表選擇偶數行。
設置完畢后,可以發現表格中每隔一行的顏色會發生變化,這就是我們想要的間隔行效果。此外,也可以根據需求進一步修改間隔行的樣式,比如加上邊框或者修改字體顏色等。