用css做一个选择省份的表格
时间: 2024-01-29 12:04:29 浏览: 26
好的,以下是一个简单的选择省份的表格的CSS代码示例:
```css
.province-table {
border-collapse: collapse;
width: 100%;
}
.province-table th,
.province-table td {
padding: 10px;
text-align: center;
}
.province-table th {
background-color: #f2f2f2;
font-weight: bold;
}
.province-table td {
border: 1px solid #ddd;
}
.province-table td:hover {
background-color: #f5f5f5;
cursor: pointer;
}
.province-table .selected {
background-color: #4CAF50;
color: white;
}
```
HTML代码示例:
```html
<table class="province-table">
<thead>
<tr>
<th>省份</th>
<th>选择</th>
</tr>
</thead>
<tbody>
<tr>
<td>北京市</td>
<td></td>
</tr>
<tr>
<td>上海市</td>
<td></td>
</tr>
<tr>
<td>广东省</td>
<td></td>
</tr>
<tr>
<td>浙江省</td>
<td></td>
</tr>
</tbody>
</table>
```
在这个表格中,每个省份都是一个单独的行。当鼠标悬停在一个省份上时,该行将变为浅灰色,表示可以选择该省份。当用户点击一个省份时,该省份所在的行将高亮显示为绿色,表示已被选择。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)