css制作表头

使用CSS制作表头的方法

基本样式设置

通过<th>标签或为<td>添加特定类名来定义表头样式。设置背景色、字体加粗、文本对齐等基础属性：

th {
  background-color: #f2f2f2;
  font-weight: bold;
  text-align: center;
  padding: 12px;
}

边框与间隔控制

添加边框和调整单元格间距增强可读性：

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
}
th {
  border-bottom: 2px solid #333;
}

悬停效果

增加交互反馈提升用户体验：

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

固定表头（滚动表格时）

使用position: sticky实现滚动时表头固定：

thead th {
  position: sticky;
  top: 0;
  z-index: 10;
}

响应式设计

通过媒体查询适配移动设备：

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

高级样式示例

创建渐变背景和阴影效果：

th {
  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  text-transform: uppercase;
  letter-spacing: 1px;
}