h5实现表格样式

实现基础表格结构

使用HTML5的<table>标签创建基础表格结构，包含表头<thead>和表体<tbody>：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>设计师</td>
    </tr>
  </tbody>
</table>

添加CSS边框样式

通过CSS设置表格边框合并模式和单元格间距：

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

设置表头背景色

为表头添加背景色和文字样式增强可读性：

th {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
}

添加斑马纹效果

使用:nth-child伪类实现交替行颜色：

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

悬停高亮效果

为表格行添加鼠标悬停交互效果：

tr:hover {
  background-color: #ddd;
}

响应式表格设计

通过媒体查询实现小屏幕下的表格响应式布局：

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table thead {
    display: none;
  }
  table tr {
    margin-bottom: 10px;
    display: block;
    border: 1px solid #ddd;
  }
  table td {
    display: block;
    text-align: right;
    border-bottom: 1px dotted #ccc;
  }
  table td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

单元格对齐控制

根据内容类型设置不同的对齐方式：

td.number {
  text-align: right;
}
td.center {
  text-align: center;
}

添加表格标题和总结

使用<caption>标签增强表格可访问性：

<table>
  <caption>员工信息表</caption>
  <!-- 表格内容 -->
</table>

固定表头实现

通过CSS实现滚动时固定表头效果：

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