css 制作报表

使用CSS制作报表

通过CSS可以创建结构清晰、样式美观的报表。以下是一些关键方法和技巧：

基础表格样式

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

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

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

响应式表格设计 对于移动设备，可以添加媒体查询使表格可横向滚动：

@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
  }
}

高级样式技巧

• 固定表头：

  thead {
  position: sticky;
  top: 0;
  }

• 斑马条纹效果：

  tbody tr:nth-child(odd) {
  background-color: #f8f8f8;
  }

• 单元格高亮：

  

  .highlight {
  background-color: #ffeb3b;
  font-weight: bold;
  }

数据可视化增强

• 进度条效果：

  
  .progress-bar {
  height: 20px;
  background-color: #e0e0e0;
  }

.progress { height: 100%; background-color: #4caf50; }

- 条件格式：
```css
td.warning {
  background-color: #fff3cd;
}

td.danger {
  background-color: #f8d7da;
}

打印优化

@media print {
  table {
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
}

这些CSS技巧可以组合使用，根据具体需求创建功能完善、视觉吸引力的报表。通过合理运用选择器和属性，可以实现高度定制化的数据展示效果。