色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

表格帶復選框CSS

方一強1年前7瀏覽0評論

表格是網站開發中常用的元素之一,而在表格中使用復選框更是常見的需求。通過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的樣式定制,使表格更加美觀,同時也提高了用戶的交互體驗。