怎么制作css表格

制作CSS表格的方法

使用HTML表格标签结合CSS样式

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

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

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

使用CSS Grid布局模拟表格

通过CSS Grid实现类似表格的布局，适合需要更灵活控制的场景：

<div class="grid-table">
  <div class="header">标题1</div>
  <div class="header">标题2</div>
  <div class="cell">内容1</div>
  <div class="cell">内容2</div>
</div>

.grid-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background-color: #ddd;
}
.grid-table .header, .grid-table .cell {
  padding: 8px;
  background-color: white;
}
.grid-table .header {
  font-weight: bold;
}

使用Flexbox实现响应式表格

通过Flexbox布局适应不同屏幕尺寸：

<div class="flex-table">
  <div class="row">
    <div class="col">标题1</div>
    <div class="col">标题2</div>
  </div>
  <div class="row">
    <div class="col">内容1</div>
    <div class="col">内容2</div>
  </div>
</div>

.flex-table {
  display: flex;
  flex-direction: column;
}
.flex-table .row {
  display: flex;
  border-bottom: 1px solid #ddd;
}
.flex-table .col {
  flex: 1;
  padding: 8px;
}
.flex-table .row:first-child .col {
  font-weight: bold;
}

添加交互效果

通过CSS伪类和过渡效果增强用户体验：

.styled-table tr:hover {
  background-color: #f5f5f5;
  transition: background-color 0.3s;
}
.styled-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

响应式表格处理

针对移动设备调整表格显示方式：

@media (max-width: 600px) {
  .styled-table thead {
    display: none;
  }
  .styled-table tr {
    display: block;
    margin-bottom: 10px;
  }
  .styled-table td {
    display: block;
    text-align: right;
  }
  .styled-table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

每种方法适用于不同场景：传统HTML表格适合数据展示，CSS Grid适合复杂布局，Flexbox适合响应式设计。根据项目需求选择合适的方式，并可通过CSS进一步自定义边框、间距、颜色等样式属性。