css怎样制作表格

使用HTML和CSS创建表格

在HTML中，表格通过<table>标签定义，CSS用于控制表格的样式和布局。

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

基础表格样式

通过CSS可以调整表格的边框、间距和对齐方式：

table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 表格宽度 */
}
th, td {
  border: 1px solid #ddd; /* 单元格边框 */
  padding: 8px; /* 内边距 */
  text-align: left; /* 文本对齐 */
}
th {
  background-color: #f2f2f2; /* 表头背景色 */
}

响应式表格设计

对于移动设备，可以通过媒体查询实现响应式布局：

@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto; /* 小屏幕横向滚动 */
  }
}

斑马纹效果

使用:nth-child()选择器实现交替行颜色：

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

悬停高亮

增加交互效果，鼠标悬停时高亮行：

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

固定表头

对于长表格，可固定表头方便浏览：

thead {
  position: sticky;
  top: 0;
}

表格布局控制

table-layout属性控制表格单元格宽度分配：

table {
  table-layout: fixed; /* 固定布局 */
  /* 或 auto; 自动布局 */
}

单元格合并

HTML原生支持跨行跨列：

<td rowspan="2">跨两行</td>
<td colspan="3">跨三列</td>

以上方法提供了从基础到进阶的表格实现方案，可根据实际需求组合使用。