HTML 表格樣式
使用 CSS 使您的表格更美觀。
HTML 表格 - 斑馬條紋
如果為每隔一行表格行新增背景顏色，您將獲得漂亮的斑馬條紋效果。
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
要為每隔一個表格行元素設定樣式，請使用 :nth-child(even) 選擇器，如下所示：
注意： 如果使用 (odd) 而不是 (even)，則樣式將應用於第 1、3、5 行等，而不是第 2、4、6 行等。
HTML 表格 - 垂直斑馬條紋
要建立垂直斑馬條紋，請為每隔一個列設定樣式，而不是每隔一行。
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
如下為表格資料元素設定 :nth-child(even)：
注意： 如果要同時為表頭和常規表格單元格設定樣式，請將 :nth-child() 選擇器同時應用於 th 和 td 元素。
組合垂直和水平斑馬條紋
您可以組合以上兩個示例的樣式，這樣每隔一行和每隔一列都會有條紋。
如果使用透明顏色，您將獲得重疊效果。
使用 rgba() 顏色指定顏色的透明度
示例
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
自己動手試一試 »
水平分隔線
| 名字 | 姓氏 | 儲蓄 |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| 喬 | Swanson | $300 |
如果僅在每行表格行的底部指定邊框，您將得到一個帶有水平分隔線的表格。
為所有 tr 元素新增 border-bottom 屬性以獲得水平分隔線
滑鼠懸停表格
使用 tr 上的 :hover 選擇器在滑鼠懸停時突出顯示錶格行
| 名字 | 姓氏 | 儲蓄 |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| 喬 | Swanson | $300 |
