第一列的替代颜色
问题描述 投票：0回答：1
我当前正在创建一个表，希望将标题行和第一列固定在其中。我希望它使行交替显示颜色（这是我实现的）。但是，在滚动表时，第一列会像这样与主体重叠；
第一列重叠体
我可以通过为第一列提供背景色来克服重叠的问题，但是后来我很难改变行的颜色。我尝试使用：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;
}
提前谢谢您
1个回答
0
投票
投票
只需添加
tbody tr:nth-child(odd) th {
background-color: red;
font-weight: 100;
}
tbody tr:nth-child(even) th {
background-color: #343434;
font-weight: 100;
}
我猜这应该为您解决
0
投票
投票
您不远。这是一个简单的示例
您想要的是table > tbody > tr:nth-child(odd) {
background-color: red;
}
最新问题
- eslint-plugin-simple-import-sort 排序错误
- Selenium Google 登录在自动化中被阻止
- 将部分行与 pandoc 向右对齐（md -> html）
- 方法prepareInterfaceForExtensionConfiguration呈现空白视图而不是提供的内容
- 从列数据中对表标题进行分类
- 如何将命令行参数传递给使用 open 命令运行的程序？
- 在 Jetpack Compose 中禁用 DropdownMenu 和 DropdownMenuItem 的涟漪效果
- VNRecognizeTextRequest 失败，但可以在 Preview.app 中选择文本
- Cookie 横幅，需要吗？
- 仅检索 Laravel 中每个团队内用户的指定角色
- 如何仅在变换上应用转换：translateX()？
- 尝试应用程序跳转到 Google TV 上的“预装”“云”应用程序时出错
- 带有 protoc_builtin PHP 的 Buf 与实际的 protoc 插件有不同的行为？
- 使用quick_xml和serde序列化数据时如何添加xml声明？
- 使用 intelliJ 将字符串串联重构为 StringBuilder
- 读取文本文件中的特定行 - 跳过始终转到最后一行
- json 文件中的 powershell 字符问题
- 如何在主列表中的每个嵌套列表上打印带有新行的嵌套列表
- Lwjgl / Opengl 字体渲染
- 调度程序初始化失败无法加载配置
© www.soinside.com 2019 - 2024. All rights reserved.