css怎么制作表格

CSS制作表格的方法

使用CSS制作表格可以通过原生HTML表格元素结合CSS样式，或者使用display: table等属性模拟表格布局。以下是几种常见方法：

使用原生HTML表格元素

通过<table>、<tr>、<td>等标签创建表格结构，再用CSS美化样式：

<table class="custom-table">
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
</table>

.custom-table {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
}
.custom-table th, .custom-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
.custom-table th {
  background-color: #f2f2f2;
}

使用CSS模拟表格布局

通过display: table系列属性实现非表格元素的表格布局：

<div class="css-table">
  <div class="css-row">
    <div class="css-cell">单元格1</div>
    <div class="css-cell">单元格2</div>
  </div>
</div>

.css-table {
  display: table;
  width: 100%;
}
.css-row {
  display: table-row;
}
.css-cell {
  display: table-cell;
  border: 1px solid #ddd;
  padding: 8px;
}

响应式表格设计

针对移动端优化，添加水平滚动：

.responsive-table {
  overflow-x: auto;
}
.responsive-table table {
  min-width: 600px; /* 保证表格最小宽度 */
}

斑马纹表格

通过:nth-child伪类实现交替行颜色：

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

悬停高亮效果

为表格行添加悬停交互：

.custom-table tr:hover {
  background-color: #e6f7ff;
}

注意事项

• 语义化优先：若展示真实表格数据，建议使用原生<table>元素。
• 边框控制：border-collapse可解决默认边框双线问题。
• 间距调整：通过padding控制单元格内边距，避免内容紧贴边框。
• 现代布局：非表格数据推荐使用Flex或Grid布局替代模拟表格方案。