css好看的表格制作

CSS表格美化方法

边框与间距优化 使用border-collapse合并边框，避免双线边框。设置padding增加单元格内边距，提升可读性。

table {
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid #ddd;
  padding: 12px;
}

斑马纹效果 通过:nth-child(even)选择器实现交替行颜色，增强视觉引导。

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

悬停高亮 添加transition过渡效果使交互更平滑。

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

表头样式 使用渐变背景和文字阴影提升层次感。

th {
  background: linear-gradient(to bottom, #4a90e2, #357abD);
  color: white;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

圆角与阴影 结合box-shadow和border-radius创造卡片效果。

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

响应式处理 使用媒体查询适应小屏幕设备。

@media screen and (max-width: 600px) {
  table { display: block; }
  tr { display: grid; grid-template-columns: 1fr 1fr; }
}

进阶设计技巧

玻璃拟态效果 通过半透明背景和模糊滤镜创造现代感。

table {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

动画加载 使用@keyframes实现数据加载动画。

@keyframes pulse {
  0% { background-color: #f5f5f5; }
  50% { background-color: #e0e0e0; }
  100% { background-color: #f5f5f5; }
}
.loading-row td {
  animation: pulse 1.5s infinite;
}

单元格状态标记 通过颜色编码表示不同状态。

td.status-success { background: #e6ffea; }
td.status-warning { background: #fff8e6; }
td.status-error { background: #ffebee; }

自定义复选框 美化表格内的表单元素。

input[type="checkbox"] {
  accent-color: #4CAF50;
  transform: scale(1.3);
}