CSS表格是網頁設計中常用的布局方式,可以讓頁面整齊有序。有時候需要讓表格的每一行都有不同的顏色,以增強頁面的視覺效果。
table{ border-collapse: collapse; width: 100%; } tr:nth-child(odd){ background-color: #f2f2f2; } tr:nth-child(even){ background-color: #fff; }
以上代碼中,我們首先給表格設置了邊框合并,讓表格看起來更加整潔。然后使用了CSS3的偽類: nth-child選擇器,實現了對奇偶行的不同顏色設置。odd表示奇數行,even表示偶數行,我們分別為它們設置了不同的背景顏色。
通過這樣的方式,我們可以輕松地為表格設置每一行的不同顏色,讓頁面更加美觀大方。如果需要,我們還可以通過調整顏色值和像素單位等,進一步定制出符合我們需求的樣式。