gpt4 book ai didi

Html 多行表 (rowspan) - 如何以正确的方式斑马纹?

转载 作者:太空狗 更新时间:2023-10-29 14:23:00 25 4
gpt4 key购买 nike

我有下表,第一行包含 2 个子行,第二行包含 3 个子行。

使用此 css 样式时,斑马色(即连续两行的交替颜色)有问题,第二个主单元格应为白色,而不是灰色:

 tr:nth-child(odd)  {background-color: #eee;}
tr:nth-child(even) {background-color: #fff;}

Faulty zebra with nth-child css

那么有没有办法以正确的方式为这样的表格涂上斑马色?

当然,我真正的问题涉及更多的行,子行的数量也更多。

<head>
<style>
tr:nth-child(odd) {background-color: #eee;}
tr:nth-child(even) {background-color: #fff;}
</style>
<head>
<body>
<table border="1">
<tr>
<td rowspan="2">
Big1
</td>
<td>
small1
</td>
</tr>
<tr>
<td>
small2
</td>
</tr>
<tr>
<td rowspan="3">
Big2
</td>
<td>
small1
</td>
</tr>
<tr>
<td>
small2
</td>
</tr>
<tr>
<td>
small3
</td>
</tr>
</table>
</body>

最佳答案

它按布局工作。

它不像

    <tr>
<td rowspan="2">
Big1
</td>
<td>
small1
</td>
</tr>

会是灰色的,这是第一个TR(奇数)

    <tr>
<td>
small2
</td>
</tr>

将是白色的,它是第二个 TR(偶数)等。

最好的方法是手动将“奇数”和“偶数”类分配给有问题的 tr。

关于Html 多行表 (rowspan) - 如何以正确的方式斑马纹?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9636513/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com