這是一份有關如何使用CSS處理表格的簡要指南。
在過去,我們通常過度使用表格來創建華麗的頁面佈局,因為它們是唯一的選擇之一。
如今,隨著Grid和Flexbox的出現,我們可以讓表格回到它原本的作用:樣式設定。
讓我們從HTML開始。這是一個基本的表格:
<table>
<thead>
<tr>
<th scope="col">姓名</th>
<th scope="col">年齡</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Flavio</th>
<td>36</td>
</tr>
<tr>
<th scope="row">Roger</th>
<td>7</td>
</tr>
</tbody>
</table>
默認情況下,這個表格看起來並不太吸引人。瀏覽器只提供了一些標準的樣式:
當然,我們可以使用CSS來調整表格的所有元素。
讓我們從邊框開始。一個漂亮的邊框可以讓表格大有不同。
我們可以對table
元素以及th
和td
等內部元素應用邊框樣式:
table, th, td {
border: 1px solid #333;
}
如果加上一些外邊距,我們會得到一個漂亮的效果:
表格中常見的一個特點是可以為一行添加顏色,並為另一行添加不同的顏色。這可以使用nth-child(odd)
或nth-child(even)
選擇器實現:
tbody tr:nth-child(odd) {
background-color: #af47ff;
}
這將給我們帶來以下效果:
如果在表格元素中添加border-collapse: collapse;
,則所有邊框將合併為一個: