CSS中的td標簽用于定義HTML表格中的單元格樣式。其中一個常見的需求是希望在表格中隔行顯示不一樣的背景顏色,讓表格更加易讀。這時,我們可以使用CSS中的偽類選擇器來實現此效果。
td:nth-child(odd){ background-color: #f2f2f2; }
以上代碼中的:nth-child(odd)即為CSS偽類選擇器,表示選擇所有奇數列的td元素。通過設置背景顏色,就能讓奇數行和偶數行呈現不同的顏色,從而讓表格更美觀。
td:nth-child(even){ background-color: #ffffff; }
若希望實現自定義的間隔色,可以通過定義兩個不同的class來實現:
.table_even{ background-color: #f2f2f2; } .table_odd{ background-color: #ffffff; }
然后在HTML表格中,借助JavaScript或者后臺語言的循環輸出,為每個單元格按照奇偶性應用不同的類名即可:
//JavaScript for循環示例 for(var i=0; i<tableCells.length; i++){ if(i % 2 == 0){ tableCells[i].classList.add("table_even"); }else{ tableCells[i].classList.add("table_odd"); } }