css 制作报表

CSS 制作报表的方法

使用CSS制作报表可以通过表格布局、Flexbox或Grid系统实现，确保数据清晰展示且样式美观。

基础表格样式

通过HTML的<table>元素结合CSS样式创建传统报表：

<table class="report">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

.report {
  width: 100%;
  border-collapse: collapse;
}
.report th, .report td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
.report th {
  background-color: #f2f2f2;
}
.report tr:nth-child(even) {
  background-color: #f9f9f9;
}

使用Flexbox布局

Flexbox适合动态宽度的报表布局，尤其适用于响应式设计：

<div class="flex-report">
  <div class="flex-row header">
    <div class="flex-cell">Header 1</div>
    <div class="flex-cell">Header 2</div>
  </div>
  <div class="flex-row">
    <div class="flex-cell">Data 1</div>
    <div class="flex-cell">Data 2</div>
  </div>
</div>

.flex-report {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.flex-row {
  display: flex;
  border-bottom: 1px solid #ddd;
}
.flex-cell {
  flex: 1;
  padding: 8px;
}
.header {
  font-weight: bold;
  background-color: #f2f2f2;
}

CSS Grid布局

Grid系统提供更精确的二维布局控制：

<div class="grid-report">
  <div class="grid-header">Header 1</div>
  <div class="grid-header">Header 2</div>
  <div class="grid-item">Data 1</div>
  <div class="grid-item">Data 2</div>
</div>

.grid-report {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}
.grid-header, .grid-item {
  padding: 8px;
  border: 1px solid #ddd;
}
.grid-header {
  font-weight: bold;
  background-color: #f2f2f2;
}

响应式设计

通过媒体查询适配不同屏幕尺寸：

@media (max-width: 600px) {
  .flex-row {
    flex-direction: column;
  }
  .grid-report {
    grid-template-columns: 1fr;
  }
}

交互增强

添加悬停效果提升用户体验：

.report tr:hover, .flex-row:hover, .grid-item:hover {
  background-color: #e6e6e6;
  transition: background-color 0.3s;
}

选择合适的方法取决于报表复杂度、响应式需求及浏览器兼容性要求。Grid适合现代浏览器，Flexbox在旧版浏览器中支持更好，传统表格则兼容性最佳。