css制作表头

CSS制作表头的方法

固定表头样式

通过CSS设置表头的背景色、字体、边框等基础样式，使表头在视觉上突出：

th {
  background-color: #f2f2f2;
  font-weight: bold;
  padding: 12px;
  text-align: left;
  border-bottom: 2px solid #ddd;
}

悬停效果增强

为表头添加悬停交互效果，提升用户体验：

th:hover {
  background-color: #e6e6e6;
  cursor: pointer;
}

冻结表头（滚动时固定）

当表格内容过长需要滚动时，保持表头始终可见：

<div class="table-container">
  <table>
    <thead>
      <tr><th>Header 1</th><th>Header 2</th></tr>
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </tbody>
  </table>
</div>

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

响应式表头设计

在小屏幕设备上调整表头布局：

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

带排序箭头的表头

添加排序状态指示图标：

th.sort-asc:after {
  content: " ↑";
  color: #666;
}
th.sort-desc:after {
  content: " ↓";
  color: #666;
}

斑马纹表头

创建交替颜色的表头效果：

thead tr:nth-child(odd) th {
  background-color: #f8f8f8;
}
thead tr:nth-child(even) th {
  background-color: #e8e8e8;
}

圆角边框表头

为表头添加圆角设计：

th:first-child {
  border-top-left-radius: 5px;
}
th:last-child {
  border-top-right-radius: 5px;
}