【发布时间】：2018-02-13 03:27:02
【问题描述】：
我正在使用表格在网页上显示数据。
现在我对<tr> 让行交替颜色感到奇怪。但是，我将冻结表格的第一列并让剩余的列左右滚动。
目前，在冻结列下方可以看到向左滚动的列。如果我将背景颜色应用于冻结列中的单元格，则向左滚动时不再显示的列将真正隐藏。
我正在使用 td:nth-child(1) 调用第一列的单元格。
问题是我使用的是交替行颜色，因此为 td:nth-child(1) 分配背景颜色会使第一行中的所有单元格颜色相同。
是否可以将 (odd) 和 (even) 添加到 nth-child 调用中？
我想使用一种更好的方法（如果有的话），而不是仅仅为第一列中的每个单元格分配类。
（注意：添加我的代码 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>【问题讨论】：
-
嗨 Chris，能否请您提供您当前的 CSS 和 HTML 的 sn-p，以便我们可以看到您的实际代码环境是什么？您可能可以将一个类应用于您想要隐藏的单个列，但我们需要查看您的代码才能确定答案。
-
欢迎来到 Stack Overflow！寻求调试帮助的问题应包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example.
-
@TylerH - 我已将我的代码添加到原始帖子中。
-
我不确定我是否遵循您想要的。你的意思是这样的？ jsfiddle.net/1b329d8u
-
我将你所做的修改为：jsfiddle.net/1b329d8u/2 这就是我想要实现的目标。
标签： html css html-table