当前位置：首页 > CSS

css表头制作

2026-01-08 20:57:05CSS

CSS 表头制作方法

固定表头（滚动时保持可见）

使用 position: sticky 属性可以创建滚动时固定的表头。确保父容器有明确的高度和 overflow 属性。

.table-container {
  height: 300px;
  overflow: auto;
}

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

th {
  position: sticky;
  top: 0;
  background-color: #f8f9fa;
  padding: 10px;
  text-align: left;
  border-bottom: 2px solid #dee2e6;
}

带阴影和悬停效果的表头

通过 box-shadow 和 :hover 伪类增强视觉效果。

th {
  background-color: #4CAF50;
  color: white;
  padding: 12px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: background-color 0.3s;
}

th:hover {
  background-color: #45a049;
}

响应式表头

结合媒体查询调整小屏幕下的表头样式。

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

斑马条纹表头

使用伪元素或背景渐变创建条纹效果。

th {
  background: linear-gradient(135deg, #f6f6f6 25%, #e9e9e9 25%, #e9e9e9 50%, #f6f6f6 50%);
  background-size: 20px 20px;
}

带排序图标的表头

通过伪元素添加排序指示箭头。

th.sortable {
  position: relative;
  cursor: pointer;
}

th.sortable::after {
  content: "↑↓";
  margin-left: 5px;
  font-size: 12px;
  opacity: 0.5;
}

th.sort-asc::after {
  content: "↑";
  opacity: 1;
}

th.sort-desc::after {
  content: "↓";
  opacity: 1;
}

多级表头样式

为包含跨列的表头添加特殊样式。

th.group-header {
  background-color: #343a40;
  color: white;
  text-align: center;
  font-weight: bold;
}

th.sub-header {
  background-color: #6c757d;
  color: white;
}

粘性表头与分页结合

当表格有分页时，确保表头在页面跳转时保持固定。

th.sticky-pagination {
  position: sticky;
  top: 40px; /* 适应分页控件高度 */
  z-index: 100;
}

高对比度表头

满足无障碍设计要求的样式。

th.high-contrast {
  background-color: black;
  color: white;
  border: 2px solid yellow;
  font-weight: bold;
}

动画表头

使用 CSS 动画吸引注意力。

css表头制作

@keyframes highlight {
  0% { background-color: #ffc107; }
  50% { background-color: #ff9800; }
  100% { background-color: #ffc107; }
}

th.animated {
  animation: highlight 2s infinite;
}