css表头制作

CSS表头制作方法

固定表头并允许内容滚动
使用position: sticky属性实现表头固定，同时表格内容可滚动。适用于长表格的数据展示。

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

表头样式美化

添加渐变背景和阴影效果
通过CSS渐变和阴影增强表头的视觉层次感，适合现代化设计需求。

th {
  background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
  padding: 12px 15px;
  text-align: left;
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  border-bottom: 2px solid #ddd;
}

响应式表头处理

使用媒体查询调整小屏幕样式
在小屏幕设备上隐藏非关键列，并通过伪元素显示简化的标题文本。

@media (max-width: 600px) {
  th:nth-child(3), 
  td:nth-child(3) {
    display: none;
  }
  th::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 80px;
  }
}

表头交互效果

悬停高亮和排序指示器
添加悬停效果和排序状态视觉反馈，提升用户操作体验。

th:hover {
  background: #e0e0e0;
  cursor: pointer;
}
th.sorted-asc::after {
  content: " ↑";
}
th.sorted-desc::after {
  content: " ↓";
}

表格边框控制

分离式边框与紧凑布局
通过border-collapse属性选择表格边框样式，适应不同设计风格。

table {
  border-collapse: separate; /* 独立边框 */
  border-spacing: 0;
}
/* 或 */
table {
  border-collapse: collapse; /* 合并边框 */
}