在網頁排版中,表格(table)是經常用到的元素之一。對于表格列的樣式處理,則需要使用列樣式(column style)。列樣式使我們可以對表格中同一列的所有單元格應用樣式。接下來,我們來看一下如何使用CSS處理表格列樣式。
標題1 | 標題2 | 標題3 |
---|---|---|
內容1-1 | 內容1-2 | 內容1-3 |
內容2-1 | 內容2-2 | 內容2-3 |
內容3-1 | 內容3-2 | 內容3-3 |
在上述示例中,我們使用了一個包含四行三列單元格的表格。我們可以使用CSS選擇器來選中表格中的某一列,比如針對第一列應用樣式,則可以使用以下CSS代碼:
table td:nth-child(1) { background-color: #f0f0f0; }
上述代碼中,nth-child(1) 等同于 :first-child,它選中了每一行中的第一個單元格(即第一列),并將其背景色設置為 #f0f0f0。同樣的,如果想對表格中的第二列應用樣式,則只需要將選擇器中的數字改為 2 即可。
除了可以使用數字來指定列,我們也可以使用單詞來指定。比如,我們可以使用 :first-child 來指定第一列,用 :last-child 來指定最后一列,用 :nth-child(odd) 來指定奇數列,用 :nth-child(even) 來指定偶數列等等。
table td:first-child { font-weight: bold; } table td:last-child { text-align: right; } table td:nth-child(odd) { background-color: #f0f0f0; } table td:nth-child(even) { background-color: #d0d0d0; }
上述代碼演示了如何分別對第一列、最后一列、奇數列和偶數列應用樣式,可以根據需求靈活使用。