css制作表头

使用CSS制作表头的方法

HTML结构

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>工程师</td>
    </tr>
  </tbody>
</table>

基础样式

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

进阶样式设计

渐变背景表头

th {
  background: linear-gradient(to bottom, #4a90e2, #357ab8);
  color: white;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

固定表头

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

悬停效果

th:hover {
  background-color: #e6e6e6;
  transition: background-color 0.3s ease;
}

响应式表头处理

移动端适配

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

斑马条纹表头

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

带图标的表头

th.sortable {
  cursor: pointer;
  position: relative;
  padding-right: 25px;
}

th.sortable:after {
  content: "↑↓";
  position: absolute;
  right: 8px;
  opacity: 0.5;
}