css 表格制作

CSS 表格制作基础

使用 <table> 标签创建表格结构，配合 CSS 控制样式。基础结构包含 <thead>、<tbody>、<tr>（行）和 <td>（单元格）。

<table>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
  </tbody>
</table>

常用样式属性

通过 CSS 控制边框、间距和对齐方式：

• border-collapse: 合并单元格边框（常用 collapse）
• padding: 单元格内边距
• text-align: 文本水平对齐（如 center）
• vertical-align: 文本垂直对齐（如 middle）

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

响应式表格

针对小屏幕设备，可通过横向滚动或调整布局实现响应式：

.table-container {
  overflow-x: auto;
}
@media (max-width: 600px) {
  td {
    display: block;
    width: 100%;
  }
}

斑马纹效果

使用 nth-child 选择器实现交替行背景色：

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

悬停高亮

通过 :hover 伪类增强交互体验：

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

复杂表头设计

合并单元格使用 colspan 或 rowspan：

<tr>
  <th colspan="2">合并的标题</th>
</tr>

固定表头与列

结合 position: sticky 实现滚动时固定元素：

thead th {
  position: sticky;
  top: 0;
  background: white;
}