css制作精美表格

使用CSS制作精美表格的方法

1. 基础表格样式优化

通过设置边框、间距和字体提升基础表格的可读性：

table {
  border-collapse: collapse;
  width: 100%;
  font-family: 'Segoe UI', sans-serif;
}
th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

2. 添加斑马纹效果

使用伪类选择器实现交替行颜色：

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

3. 悬停高亮交互

增强用户体验的悬停效果：

tr:hover {
  background-color: #e6f7ff;
  transition: background-color 0.3s;
}

4. 表头特殊样式

突出显示表头区域：

th {
  background-color: #4CAF50;
  color: white;
  position: sticky;
  top: 0;
}

5. 响应式表格设计

添加水平滚动条适应小屏幕：

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

6. 高级视觉效果

通过阴影和圆角增强立体感：

table {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
}

7. 单元格状态指示

用颜色表示不同状态：

td.warning {
  background-color: #fff3cd;
}
td.error {
  background-color: #f8d7da;
}

8. 动画效果

加载数据时的动画：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
tr {
  animation: fadeIn 0.5s ease-in;
}

实际应用时可根据需求组合这些样式，通过调整颜色、间距和动画参数实现个性化设计。建议使用CSS变量便于主题统一管理：

:root {
  --primary-color: #4CAF50;
  --hover-color: #e6f7ff;
}