css表格的制作方法

表格基础结构

使用HTML的<table>标签创建表格框架，搭配<tr>定义行，<td>定义单元格。例如：

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

边框样式控制

通过border-collapse合并边框，避免双线效果。常用属性：

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

表头样式优化

使用<th>标签定义表头，并添加特殊样式：

th {
  background-color: #f2f2f2;
  text-align: left;
}

响应式表格

添加横向滚动条适应小屏幕：

div.table-container {
  overflow-x: auto;
}

斑马线效果

通过:nth-child()实现交替行颜色：

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

悬停高亮

为行添加鼠标悬停效果：

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

单元格对齐控制

使用text-align和vertical-align调整内容位置：

td {
  text-align: center;
  vertical-align: middle;
}

表格标题添加

通过<caption>标签添加表格描述：

<table>
  <caption>月度销售数据</caption>
  <!-- 表格内容 -->
</table>