css表头制作

CSS表头制作方法

固定表头滚动表格内容
使用position: sticky属性实现表头固定，其余内容可滚动。适用于长表格数据展示。

thead th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}
tbody {
  height: 300px;
  overflow-y: auto;
}

渐变背景表头

通过线性渐变增加视觉层次感，适合现代化界面设计。

th {
  background: linear-gradient(to right, #6a11cb, #2575fc);
  color: white;
  padding: 12px;
  text-align: left;
}

带阴影和圆角的表头

结合box-shadow和border-radius创建立体效果。

th {
  background: #f8f9fa;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border-radius: 8px 8px 0 0;
  padding: 10px 15px;
}

响应式表头处理

使用媒体查询调整小屏幕下的表头样式，确保移动端可用性。

@media (max-width: 768px) {
  th {
    font-size: 14px;
    padding: 8px 10px;
  }
}

悬停高亮效果

为表头单元格添加交互反馈，提升用户体验。

th:hover {
  background-color: #e9ecef;
  transition: background-color 0.3s ease;
}

带排序箭头的表头

通过伪元素添加排序指示图标，适用于可排序表格。

th.sortable::after {
  content: "↑↓";
  margin-left: 5px;
  font-size: 0.8em;
}
th.sorted-asc::after {
  content: "↑";
}
th.sorted-desc::after {
  content: "↓";
}

斑马线表头设计

交替颜色方案增强可读性，需配合nth-child选择器使用。

th:nth-child(odd) {
  background: #f2f2f2;
}
th:nth-child(even) {
  background: #e6e6e6;
}