CSS表格列顏色不同,是一個常見的需求,使用CSS可以很方便地實現這個效果。
首先,在HTML中創建一個表格代碼,如下所示:
<table> <tr> <td>第一列</td> <td>第二列</td> <td>第三列</td> </tr> <tr> <td>第一列</td> <td>第二列</td> <td>第三列</td> </tr> </table>
然后,在CSS中定義表格的樣式。我們可以使用:nth-child偽類來定義表格列的樣式。
table { border-collapse: collapse; width: 100%; } td { border: 1px solid #ddd; padding: 8px; text-align: left; } /* 第一列為藍色 */ td:nth-child(1) { background-color: blue; color: #fff; } /* 第二列為紅色 */ td:nth-child(2) { background-color: red; color: #fff; } /* 第三列為綠色 */ td:nth-child(3) { background-color: green; color: #fff; }
上述代碼中,我們在td選擇器中使用:nth-child(1)、:nth-child(2)和:nth-child(3)來定義不同的列樣式。整個表格的樣式使用了border-collapse屬性來讓表格邊框合并為一個單一的邊框。
現在,我們就可以得到一個每一列顏色不同的表格了。
第一列 | 第二列 | 第三列 |
第一列 | 第二列 | 第三列 |