表格是網站開發中常用的元素之一,而在表格中使用復選框更是常見的需求。通過CSS,我們可以定制表格的樣式和復選框的樣式,以增強網站的美觀性和交互性。
實現一個帶復選框的表格,需要以下幾個步驟:
1. HTML代碼
<table> <thead> <tr> <th>姓名</th> <th>性別</th> <th>年齡</th> <th>是否選中</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>男</td> <td>20</td> <td><input type="checkbox" name="check1" value="1"></td> </tr> <tr> <td>李四</td> <td>女</td> <td>18</td> <td><input type="checkbox" name="check2" value="1"></td> </tr> </tbody> </table>
2. CSS樣式
table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 2px solid #ddd; width: 18px; height: 18px; vertical-align: middle; cursor: pointer; } input[type="checkbox"]:checked { background-color: #009688; }
代碼中,我們給表格設置了邊框合并和100%寬度。每個單元格和表頭都有1像素的灰色實線邊框和8像素的內邊距。表頭有灰色的背景顏色。
對于復選框,我們對默認的外觀進行了覆蓋,并添加了灰色的邊框和白色的背景顏色。通過:checked偽類,我們可以讓選中的復選框顯示為綠色的背景色。
以上是一個簡單的表格帶復選框的CSS實現,通過CSS的樣式定制,使表格更加美觀,同時也提高了用戶的交互體驗。