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

Question

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

这是我的小提琴：JSFiddle

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

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

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

我试图遵循这个答案，但无法让它在我的小提琴上工作

标签： htmlcss

Answer 1

您不能使用position: sticky;on<thead>和/或<tr>element 但 on<th>

删除您已经创建的类：

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

相反，使用这个：

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