css 制作报表

使用CSS制作报表

CSS可以用于制作报表，通过表格布局、样式设计和响应式处理，使报表更加美观和易读。以下是一些关键步骤和技巧：

基础表格样式

定义表格的基本样式，包括边框、间距和字体：

table {
  width: 100%;
  border-collapse: collapse;
  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;
  }
}

单元格对齐

根据数据类型调整对齐方式：

td.number {
  text-align: right;
}
td.center {
  text-align: center;
}

表头固定

对于长表格，固定表头以便滚动时保持可见：

thead {
  position: sticky;
  top: 0;
}

条件格式

根据数值范围改变单元格背景色：

td.high {
  background-color: #ffdddd;
}
td.medium {
  background-color: #ffffcc;
}
td.low {
  background-color: #ddffdd;
}

打印优化

确保报表打印时显示完整：

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

高级样式

添加圆角边框和阴影提升视觉效果：

table {
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

通过组合这些CSS技术，可以创建专业、美观且功能完善的报表。根据具体需求调整样式细节，如颜色、间距和响应式断点。