table 表哥 的check 怎么设置宽度
时间: 2023-11-27 08:49:27 浏览: 173
你可以使用CSS来设置table中某一列或某几列的宽度,具体方法如下:
1. 添加一个类名到table元素上,例如:`<table class="my-table">`
2. 在CSS中定义该类名的样式,例如:
```
.my-table {
width: 100%;
border-collapse: collapse;
}
.my-table th,
.my-table td {
padding: 8px;
text-align: left;
}
.my-table th:nth-child(1),
.my-table td:nth-child(1) {
width: 20%;
}
.my-table th:nth-child(2),
.my-table td:nth-child(2) {
width: 40%;
}
.my-table th:nth-child(3),
.my-table td:nth-child(3) {
width: 40%;
}
```
在上述代码中,`.my-table th:nth-child(1)`和`.my-table td:nth-child(1)`表示设置第一列的宽度为20%,`.my-table th:nth-child(2)`和`.my-table td:nth-child(2)`表示设置第二列的宽度为40%,以此类推。你可以根据需要,自行定义列宽度。
3. 在HTML中使用`<th>`和`<td>`标签定义表头和单元格内容,例如:
```
<table class="my-table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
</tbody>
</table>
```
这样就可以设置table表格中某一列或某几列的宽度了。
阅读全文
相关推荐

















