css将表头固定在上面

在Web开发中，表格是一个非常重要的元素，经常出现在数据展示的页面上。但是当表格的数据非常多的时候，表头就会被滚动到页面上方，这样就会影响用户的使用体验。于是我们就需要使用CSS将表头固定在表格的顶部。

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  position: sticky;
  top: 0;
  background-color: white;
}

th,td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {
  background-color: #f5f5f5;
}

上述代码中，我们给table元素设置了100%的宽度和边框合并的属性。然后按照表格规范，我们用thead来表示表格的头部部分。这里我们使用CSS的position属性将表头固定在页面的顶部。对于thead元素，我们设置了top为0，也就是固定在页面顶部，并指定了白色背景。

另外，我们还给表格的单元格设置了padding和边框，以及鼠标悬停时的背景色。

通过上述CSS代码，我们可以轻松实现表头的固定效果。