CSS模板制作表格

CSS表格基础结构

HTML表格由<table>标签定义，包含<tr>（行）、<th>（表头）和<td>（单元格）。基础结构如下：

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

边框样式设置

通过border属性定义表格边框，建议使用border-collapse: collapse合并边框：

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

表头样式优化

表头通常需要突出显示，可通过背景色和文字样式区分：

th {
  background-color: #4CAF50;
  color: white;
  text-align: left;
}

隔行变色效果

使用:nth-child()伪类实现斑马纹效果，增强可读性：

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

悬停高亮交互

添加悬停效果提升用户体验：

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

响应式表格设计

针对小屏幕设备添加横向滚动条：

@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
  }
}

高级样式示例

结合阴影和圆角创建现代风格表格：

table {
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
}
th {
  font-weight: 600;
  letter-spacing: 0.5px;
}

固定表头实现

当表格较长时需要固定表头：

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

单元格对齐控制

根据不同数据类型设置对齐方式：

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

边框样式进阶

使用CSS变量管理颜色，方便主题切换：

:root {
  --border-color: #e0e0e0;
  --header-bg: #2196F3;
}
th, td {
  border-color: var(--border-color);
}
th {
  background: var(--header-bg);
}