我正在使用表格在网页上显示数据。
现在我让<tr>奇怪的是让行交替颜色。但是，我将冻结表格的第一列，并使剩余的列向左和向右滚动。
目前，在冻结列下可以看到向左滚动的列。如果我将背景颜色应用于冻结列中的单元格，则向左滚动时不再显示的列将被真正隐藏。
我使用td：nth-child（1）调用第一列的单元格。
问题在于我使用交替的行颜色，因此为td：nth-child（1）指定背景颜色会使第1行中的所有单元格颜色相同。
是否可以在第n个子呼叫中添加（奇数）和（偶数）？
我想使用更好的方法（如果有的话），而不仅仅是为第一列中的每个单元格分配类。
（注意：添加了我的代码02/12/2018）
table.sidebyside {
width: 800px;
overflow-x: scroll;
}
table.sidebyside th:nth-child(1), table.sidebyside td:nth-child(1) {
width: 300px !important;
position:absolute;
}
table.sidebyside th:nth-child(2), table.sidebyside td:nth-child(2) {
padding-left: 300px !important;
}
table.sidebyside th {
background-color: #4b91ea;
height: 63px;
}
table.sidebyside td:nth-child(1) (odd) {
background-color: #fff;
}
table.sidebyside tr:nth-child (even) > td:nth-child(1) {
background-color: rgba(0,0,0,.05);
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-12">
<div style="width:600px; overflow: auto;">
<table class="sidebyside table table-striped">
<tbody>
<tr>
<th>
</th>
<th>
Bronze-High Deductible
</th>
<th>
Silver-HMO
</th>
<th>
Gold-PPO Low
</th>
<th>
Gold-PPO Med
</th>
</tr>
<tr>
<td>
<b>
Score: </b>
</td>
<td>
<span class="text-green">
95 </span>
</td>
<td>
<span class="text-yellow">
77 </span>
</td>
<td>
<span class="text-danger">
32 </span>
</td>
<td>
<span class="text-danger">
24 </span>
</td>
</tr>
<tr>
<td>
<b>
RealCost: </b>
</td>
<td>
$4,7772.32
</td>
<td>
$6,024.81
</td>
<td>
$8,194.55
</td>
<td>
$8,194.55
</td>
</tr>
<tr>
<td>
<b>
Premiums: </b>
</td>
<td>
$2,400.00
</td>
<td>
$3,100.00
</td>
<td>
$3,956.00
</td>
<td>
$3,956.00
</td>
</tr>
<tr>
<td>
<b>
Cost of Services: </b>
</td>
<td>
$1,575.00
</td>
<td>
$2,239.00
</td>
<td>
$2,983.00
</td>
<td>
$2,983.00
</td>
</tr>
<tr>
<td>
<b>
Cost of Medications: </b>
</td>
<td>
$797.32
</td>
<td>
$927.32
</td>
<td>
$1,198.46
</td>
<td>
$1,198.46
</td>
</tr>
<tr>
<td>
</td>
<td colspan="4">
</td>
</tr>
<tr>
<td>
<b>
Individual Deductible: </b>
</td>
<td>
$3,350.00
</td>
<td>
$3,850.00
</td>
<td>
$4,250.00
</td>
<td>
$4,250.00
</td>
</tr>
<tr>
<td>
<b>
Individual Out of Pocket Maximum: </b>
</td>
<td>
$6,350.00
</td>
<td>
$6,850.00
</td>
<td>
$7,050.00
</td>
<td>
$7,050.00
</td>
</tr>
<tr>
<td>
<b>
Family Deductible: </b>
</td>
<td>
$6,650.00
</td>
<td>
$6,950.00
</td>
<td>
$7,200.00
</td>
<td>
$7,200.00
</td>
</tr>
<tr>
<td>
<b>
Family Out of Pocket Maximum: </b>
</td>
<td>
$12,900.00
</td>
<td>
$13,900.00
</td>
<td>
$15,400.00
</td>
<td>
$15,400.00
</td>
</tr>
<tr>
<td>
<b>
Coinsurance: </b>
</td>
<td>
20%
</td>
<td>
20%
</td>
<td>
30%
</td>
<td>
30%
</td>
</tr>
<tr>
<td>
<b>
Copayment: </b>
</td>
<td>
$25.00
</td>
<td>
$30.00
</td>
<td>
$40.00
</td>
<td>
$40.00
</td>
</tr>
<tr>
<td>
<b>
Pharmacy Generic: </b>
</td>
<td>
$20.00
</td>
<td>
$35.00
</td>
<td>
$45.00
</td>
<td>
$45.00
</td>
</tr>
<tr>
<td>
<b>
Pharmacy Brand: </b>
</td>
<td>
$40.00
</td>
<td>
$45.00
</td>
<td>
$60.00
</td>
<td>
$60.00
</td>
</tr>
<tr>
<td>
<b>
Pharmacy Non Preferred: </b>
</td>
<td>
$60.00
</td>
<td>
$70.00
</td>
<td>
$80.00
</td>
<td>
$80.00
</td>
</tr>
<tr>
<td>
<b>
Mail Order Generic: </b>
</td>
<td>
$60.00
</td>
<td>
$80.00
</td>
<td>
$90.00
</td>
<td>
$90.00
</td>
</tr>
<tr>
<td>
<b>
Mail Order Brand: </b>
</td>
<td>
$80.00
</td>
<td>
$90.00
</td>
<td>
$100.00
</td>
<td>
$100.00
</td>
</tr>
<tr>
<td>
<b>
Mail Order Non Preferred: </b>
</td>
<td>
$120.00
</td>
<td>
$140.00
</td>
<td>
$175.00
</td>
<td>
$175.00
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
答案 0 :(得分：0)
甚至使用
table tr td:nth-child(even)
奇数使用
table tr td:nth-child(odd)
此外，总是希望使用您想要应用css的确切后代，以避免样式表选择无效的html标记。
答案 1 :(得分：0)
https://jsfiddle.net/1b329d8u/2/是我想要实现的目标。
table.sidebyside {
width: 800px;
overflow-x: scroll;
}
.sidebyside th:nth-child(1), .sidebyside td:nth-child(1) {
width: 300px !important;
position:absolute;
}
.sidebyside th:nth-child(2), .sidebyside td:nth-child(2) {
padding-left: 300px !important;
}
.sidebyside th {
background-color: #4b91ea;
height: 63px;
}
.sidebyside tr:nth-child(even) > td:nth-child(1) {
background-color: #fff;
}
.sidebyside tr:nth-child(odd) > td:nth-child(1) {
background-color: #f7fafa;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-12">
<div style="width:600px; overflow: auto;">
<table class="sidebyside table table-striped">
<tbody>
<tr>
<th></th>
<th>Bronze-High Deductible</th>
<th>Silver-HMO</th>
<th>Gold-PPO Low</th>
<th>Gold-PPO Med</th>
</tr>
<tr>
<td><b>Score: </b></td>
<td><span class="text-green">95 </span></td>
<td><span class="text-yellow">77 </span></td>
<td><span class="text-danger">32 </span></td>
<td><span class="text-danger">24 </span></td>
</tr>
<tr>
<td><b>RealCost: </b></td>
<td>$4,7772.32</td>
<td>$6,024.81</td>
<td>$8,194.55</td>
<td>$8,194.55</td>
</tr>
<tr>
<td><b>Premiums: </b></td>
<td>$2,400.00</td>
<td>$3,100.00</td>
<td>$3,956.00</td>
<td>$3,956.00</td>
</tr>
<tr>
<td><b>Cost of Services: </b></td>
<td>$1,575.00</td>
<td>$2,239.00</td>
<td>$2,983.00</td>
<td>$2,983.00</td>
</tr>
<tr>
<td><b>Cost of Medications: </b></td>
<td>$797.32</td>
<td>$927.32</td>
<td>$1,198.46</td>
<td>$1,198.46</td>
</tr>
<tr>
<td></td>
<td colspan="4"></td>
</tr>
<tr>
<td><b>Individual Deductible: </b></td>
<td>$3,350.00</td>
<td>$3,850.00</td>
<td>$4,250.00</td>
<td>$4,250.00</td>
</tr>
<tr>
<td><b>Individual Out of Pocket Maximum: </b></td>
<td>$6,350.00</td>
<td>$6,850.00</td>
<td>$7,050.00</td>
<td>$7,050.00</td>
</tr>
<tr>
<td><b>Family Deductible: </b></td>
<td>$6,650.00</td>
<td>$6,950.00</td>
<td>$7,200.00</td>
<td>$7,200.00</td>
</tr>
<tr>
<td><b>Family Out of Pocket Maximum: </b></td>
<td>$12,900.00</td>
<td>$13,900.00</td>
<td>$15,400.00</td>
<td>$15,400.00</td>
</tr>
<tr>
<td><b>Coinsurance: </b></td>
<td>20%</td>
<td>20%</td>
<td>30%</td>
<td>30%</td>
</tr>
<tr>
<td><b>Copayment: </b></td>
<td>$25.00</td>
<td>$30.00</td>
<td>$40.00</td>
<td>$40.00</td>
</tr>
<tr>
<td><b>Pharmacy Generic: </b></td>
<td>$20.00</td>
<td>$35.00</td>
<td>$45.00</td>
<td>$45.00</td>
</tr>
<tr>
<td><b>Pharmacy Brand: </b></td>
<td>$40.00</td>
<td>$45.00</td>
<td>$60.00</td>
<td>$60.00</td>
</tr>
<tr>
<td><b>Pharmacy Non Preferred: </b></td>
<td>$60.00</td>
<td>$70.00</td>
<td>$80.00</td>
<td>$80.00</td>
</tr>
<tr>
<td><b>Mail Order Generic: </b></td>
<td>$60.00</td>
<td>$80.00</td>
<td>$90.00</td>
<td>$90.00</td>
</tr>
<tr>
<td><b>Mail Order Brand: </b></td>
<td>$80.00</td>
<td>$90.00</td>
<td>$100.00</td>
<td>$100.00</td>
</tr>
<tr>
<td><b>Mail Order Non Preferred: </b></td>
<td>$120.00</td>
<td>$140.00</td>
<td>$175.00</td>
<td>$175.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
感谢@TylerH提供解决方案。我不得不使用tr：nth-child（偶数）＆gt; td：nth-child（1）所以我可以只定位第一列并在tr级使用（偶数）和（奇数）。