如何僅用CSS實現表格每三行循環變化背景色的斑馬紋效果？

本文介紹如何僅使用css，為表格創建每三行一個循環變化背景色的斑馬紋效果，尤其適用于移動應用開發環境，無需依賴JavaScript或window對象。

在移動應用開發中，美觀的表格樣式至關重要。 本方案利用CSS的nth-child偽類選擇器，巧妙地實現每三行一組的背景色變化。 我們以六行為一個周期，定義兩組不同的背景色。

以下CSS代碼實現了這一效果：

.table {   border-collapse: collapse; }  .table td {   border: 1px solid #ddd;   padding: 8px; /* 添加內邊距，增強可讀性 */ }  .table tr {   background-color: #f9f9f9; /* 默認背景色 */ }  .table tr:nth-child(6n+1), .table tr:nth-child(6n+2), .table tr:nth-child(6n+3) {   background-color: #ffffff; /* 第一組三行背景色 */ }  .table tr:nth-child(6n+4), .table tr:nth-child(6n+5), .table tr:nth-child(6n+6) {   background-color: #cccccc; /* 第二組三行背景色 */ }

代碼解釋：

立即學習“前端免費學習筆記（深入）”；

• .table 設置表格樣式，去除單元格間的間隙。
• .table td 設置單元格邊框和內邊距，提升視覺效果。
• .table tr 設置默認背景色。
• :nth-child(6n+1), :nth-child(6n+2), :nth-child(6n+3) 選擇每六行中的前三行，應用白色背景。
• :nth-child(6n+4), :nth-child(6n+5), :nth-child(6n+6) 選擇每六行中的后三行，應用灰色背景。

將以上CSS代碼應用于你的