【发布时间】：2020-04-06 20:10:54
【问题描述】：
我目前正在创建一个表格，我希望在该表格中固定标题行和第一列。我想要它让行交替颜色（我已经实现）。但是，滚动表格时，第一列会像这样与正文重叠；
第一列重叠正文
我可以通过给第一列一个背景颜色来克服重叠问题，但是我很难改变行颜色。我曾尝试使用 :nth-child （奇数和偶数）但没有运气，而是为整个列着色。有谁知道是否有可能实现这一目标？
我有一个codepen，目前我的进度位于；
https://codepen.io/fizaan-rasool/pen/xxbOrJo?editors=1100
<div>
<table>
<thead>
<tr>
<th></th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
</tr>
</thead>
<tbody>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
</tbody>
</table>
</div>
CSS：
div {
min-width: 100%;
overflow: scroll;
position: relative;
background-color: #3D3D3D;
border-radius: 15px;
color: white;
font-family: Helvetica;
font-weight: 100;
height: 150px;
}
table {
position: relative;
border-collapse: collapse;
}
td, th {
padding: 0.25em;
min-width: 100px;
}
th:first-child {
z-index: 100;
/* background: #3d3d3d; */
}
/* tbody th:nth-child(n+0){
color: green;
} */
/* tbody tr th:nth-child(odd) {
background-color: green;
} */
thead th {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
color: #76A8B0;
background-color: #343434;
font-weight: 100;
}
thead th:first-child {
left: 0;
z-index: 100;
height: 30px;
background-color: #343434;
}
tbody th {
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
height: 30px;
z-index: 100;
}
tbody th:nth-child(odd) {
font-weight: 100;
z-index: 100;
}
tr:nth-child(even){
background-color: #343434;
z-index: 10;
}
tbody tr:nth-child(odd) {
background-color: red;
}
thead {
text-align: left;
}
提前谢谢你
【问题讨论】：
标签： css sass css-selectors