css制作表头

CSS 制作表头的方法

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

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

th {
  position: sticky;
  top: 0;
  background-color: #f8f9fa;
  z-index: 10;
}

添加背景色和边框 通过设置背景色和边框增强表头的视觉区分度。

th {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

悬停效果 为表头添加悬停效果以提升交互体验。

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

响应式设计 使用媒体查询确保表头在小屏幕上也能正常显示。

@media screen and (max-width: 600px) {
  th {
    display: block;
    width: 100%;
  }
}

斑马条纹表头 通过 nth-child 选择器为表头添加交替颜色。

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

阴影效果 为表头添加轻微的阴影以增加层次感。

th {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

圆角边框 为表头的第一个和最后一个单元格添加圆角。

th:first-child {
  border-top-left-radius: 10px;
}

th:last-child {
  border-top-right-radius: 10px;
}

字体和文本样式 调整表头的字体大小、粗细和对齐方式。

th {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}