我在一个页面上有多个表格，我希望这些表格的标题是粘性的

【问题标题】：I have multiple tables on a page of which I want the headers to be sticky我在一个页面上有多个表格，我希望这些表格的标题是粘性的
【发布时间】：2020-09-09 05:59:59
【问题描述】：

我在一个页面上有多个表格，我希望它们的标题是粘性的。

这是我的小提琴：JSFiddle

这是涉及 div 包装器和表头的 CSS：

.scroll {
  overflow: auto;
  max-height: 300px;
  position: relative;
}

.headclass th{
  position: sticky;
  top: 0;
}

I tried to follow this answer, but can't get it working on my fiddle

【问题讨论】：

在第二张桌子上，您没有将 class="headclass" 添加到您的头

标签： html css

【解决方案1】：

您不能在<thead> 和/或<tr> 元素上使用position: sticky;，而是在<th> 上使用<th>

删除你已经创建的那个类：

.headclass th{
  position: sticky;
  top: 0;
}

改用这个：

.headclass tr.bg-info th {
  background: #17a2b8;
  position: sticky;
  top: 0;
}

【讨论】：