css 表格 实现td 根据 th宽度
时间: 2024-04-29 21:22:43 浏览: 10
可以使用CSS中的属性选择器和伪元素来实现。
首先,给每个th设置一个data属性,记录其宽度值,如下所示:
```html
<table>
<thead>
<tr>
<th data-width="100">Name</th>
<th data-width="150">Age</th>
<th data-width="200">City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
```
然后,使用CSS属性选择器选择每个td,并利用伪元素:before来插入一个空的占位元素,宽度设置为对应th的宽度值,代码如下:
```css
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #ddd;
font-weight: bold;
text-align: left;
padding: 10px;
}
td {
padding: 10px;
}
td:before {
content: "";
display: inline-block;
width: attr(data-width px, 0); /* 使用attr()函数获取对应th的data-width属性值 */
vertical-align: middle;
}
```
这样,每个td就会在其前面插入一个宽度为对应th宽度值的空元素,从而实现了td宽度根据th的效果。