可以使用CSS代码实现将表头固定在页面顶部。

例如：

table {
  width: 100%;
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  table-layout: fixed;
}

thead {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
}

th,
td {
  padding: 0.5rem;
  text-align: left;
  border: 1px solid #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

在上面的代码中，我们使用了position: sticky属性，并将top属性设置为0，将表头固定在页面的顶部。

如果您需要让表头在滚动时保持固定，并且在表尾处顶部的位置上升，则可以使用以下代码：

thead.sticky {
  position: sticky;
  top: -1px;
  z-index: 1;
  background: #fff;
}

tbody {
  overflow-y: scroll;
  height: 400px;
  position: relative;
}

tbody::-webkit-scrollbar {
  width: 10px;
}

tbody::-webkit-scrollbar-track {
  background: #f1f1f1;
}

tbody::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

tbody::-webkit-scrollbar-thumb:hover {
  background: #555;
}

在上面的代码中，我们将表体设置为相对定位，使得表头可以使用相对于表体的绝对定位，并在表头处创建一个空白行来防止在滚动时表头和表身之间出现间隙。我们还使用了overflow-y属性来设置表体的垂直滚动，并使用“::-webkit-scrollbar”样式来自定义表体的滚动条。

通过这两种方法中的任何一种，您都可以将表头固定在页面的顶部并使其在滚动时保持可见。