如下表：
我使用以下方法来锁定/冻结两个标题：
<style>
.tableFixHead { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
</style>
但是，当我向下滚动时，两个标题重叠：
:-)
这是上面示例的代码笔：
https://codepen.io/dharmatech/pen/PopyMzv
有没有办法让它们不重叠？
谢谢！
注意：我包含了标签 asp.net-core，因为它使用的是默认的 CSS，它适用于 ASP.NET Core 站点。
【问题讨论】：
标签： css twitter-bootstrap asp.net-core bootstrap-4 html-table
您可以在 CSS 中独立调用第一行和第二行，并将第一行粘贴在 top: 0; 处，将第二行粘贴在 top: 35; 之类的位置，这样它们就不会重叠。
我添加了这段代码来做到这一点：
.tableFixHead thead tr .table-bordered { position: sticky; top: 0; z-index: 1;}
.tableFixHead thead tr:nth-child(2) { position: sticky; top: 35px; z-index: 1;}
它正在运行：https://jsfiddle.net/rpne1as6/1/
编辑：这是直接在 SO 上的结果。我不得不删除一些底部的行以满足 SO 的字符限制，但您可以在此处看到这两行：
/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
/* Provide sufficient contrast against white background */
a {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px; /* Vertically center the text there */
}
.tableFixHead { overflow: auto; height: 100px; }
.tableFixHead thead tr .table-bordered { position: sticky; top: 0; z-index: 1;}
.tableFixHead thead tr:nth-child(2) { position: sticky; top: 35px; z-index: 1;}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Index - NutritionTrackerRazorPages</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" href="/">NutritionTracker</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" href="/FoodCategories">Food Categories</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/SimpleFoods">Simple Foods</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/ComplexFoods">Complex Foods</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/ComplexFoodComponents/IndexGrouped">Complex Food Components</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/FoodRecords">Food Records</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/FoodRecords/IndexGrouped">Food Records Grouped</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/FoodRecords/IndexTabulator">Food Records Tabulator</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/FoodRecords/IndexDevExtreme">Food Records DevExtreme</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/FoodRecords/IndexWebix">Food Records Webix</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
<p>
<a href="/FoodRecords/Create">Create New</a>
</p>
<div
style="height: 70vh; overflow: auto;"
>
<style>
}
</style>
<table class="table table-sm table-striped-- table-bordered-- tableFixHead">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="table-bordered" colspan="8">Lipids</th>
<th class="table-bordered" colspan="7">Carbohydrates</th>
<th></th>
<th class="table-bordered" colspan="12">Vitamins</th>
<th class="table-bordered" colspan="10">Minerals</th>
</tr>
<tr>
<th>Date</th>
<th>Time</th>
<th>Food</th>
<th>Amount</th>
<th>Cals</th>
<th>Fat</th>
<th>Mono</th>
<th>Poly</th>
<th>Om3</th>
<th>Om6</th>
<th>Sat</th>
<th>Trans</th>
<th>Chol</th>
<th>Carb</th>
<th>Fiber</th>
<th>Sol</th>
<th>Insol</th>
<th>Starch</th>
<th>Sug</th>
<th>Add</th>
<th>Pro</th>
<th>B1</th>
<th>B2</th>
<th>B3</th>
<th>B5</th>
<th>B6</th>
<th>B12</th>
<th>Fol</th>
<th>A</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>K</th>
<th>Cal</th>
<th>Cop</th>
<th>Iron</th>
<th>Mag</th>
<th>Mang</th>
<th>Pho</th>
<th>Pot</th>
<th>Sel</th>
<th>Sod</th>
<th>Zinc</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1/1/2021</td>
<td>12:00 PM</td>
<td>Avocado (g)</td>
<td>50</td>
<td>84</td>
<td>7.70</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>4.30</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1.00</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Basmati Rice (g)</td>
<td>300</td>
<td>1067</td>
<td>3.33</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>240</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>20</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Ground Beef 80/20 (g)</td>
<td>200</td>
<td>508</td>
<td>32</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>51</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="table-info">
<td></td>
<td>
<a href="/FoodRecords/Create?Date=2021-01-01&Time=2021-01-01%2012%3A00&handler=WithDate">
Add
</a>
</td>
<td></td>
<td>Meal:</td>
<td>1658</td>
<td>43</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>244</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>72</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td></td>
<td>6:00 PM</td>
<td>Onion (g)</td>
<td>150</td>
<td>60</td>
<td>0.15</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>14</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1.65</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Lentils (g)</td>
<td>250</td>
<td>714</td>
<td>3.57</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>164</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>57</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Basmati Rice (g)</td>
<td>350</td>
<td>1244</td>
<td>3.89</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>280</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>23</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="table-info">
<td></td>
<td>
<a href="/FoodRecords/Create?Date=2021-01-01&Time=2021-01-01%2018%3A00&handler=WithDate">
Add
</a>
</td>
<td></td>
<td>Meal:</td>
<td>2019</td>
<td>7.61</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>458</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>82</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - NutritionTrackerRazorPages - <a href="/Privacy">Privacy</a>
</div>
</footer>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
<script src="/_framework/aspnetcore-browser-refresh.js"></script></body>
</html>【讨论】：
.tableFixHead thead tr .table-bordered 更改为 .tableFixHead thead tr th，它得到了相同的结果，但我需要进行更改，否则背景颜色将无法正常工作。