我试图在我的网站中添加NBA实时比分的备用表格行颜色,但是我的表格有点奇怪,因为每个表格行都包含一个给定季度比赛的内部表格行。我希望每个team 1、scores、quarter和team 2组合都有相同的背景颜色。下面是它的当前外观和我的代码:
于飞:
<table>
<thead>
<tr>
<th class="left" style="width:40%; ">Home</th>
<th style="width:10%;" colspan="2">Scores</th>
<th class ="right" style="width:40%;">Away</th>
</tr>
</thead>
<tbody id="tableData">
</tbody>
</table>
Javascript语言:
else{
data += `<tr>
<td class="left" rowspan="2"> ${item.team1} <img src=${item.team1Img}></td>
<td> ${item.score1} </td>
<td> ${item.score2} </td>
<td class="right" rowspan="2"> <img src=${item.team2Img}> ${item.team2}</td>
</tr>
<tr>
<td class="period" colspan="2">Final</td>
</tr>`;
}
CSS:
tr:nth-child(3n+0){
background-color: #1b1b1b;
color: #fff;
}
也许我所需要的只是一个不同的第n个孩子的公式,不知道它是如何工作的,也找不到更先进的在线资源。
提前感谢!
1条答案
按热度按时间r7xajy2e1#
我反复思考了几次问题,终于找到了答案:tr:第n个子项(4n+1),tr:第n个子项(4n+2)
这将选择每2个表行。
在此处找到答案:nth-child to alternate by 2 rows