css好看的表格制作

CSS 表格美化技巧

边框与间距优化
使用 border-collapse: collapse 合并边框，避免双线间距。通过 padding 调整单元格内边距，border 属性定义线条样式。例如：

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

颜色与背景
交替行色增强可读性，使用 nth-child(even) 选择器。表头可单独设置深色背景：

th {
  background-color: #4CAF50;
  color: white;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}

悬停效果
增加交互性，鼠标悬停时高亮行：

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

圆角与阴影
为表格添加 border-radius 和 box-shadow 提升立体感：

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

响应式设计
小屏幕下隐藏非必要列，横向滚动保留核心数据：

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

斑马线进阶样式
结合渐变背景创造更柔和的交替色：

tr:nth-child(odd) {
  background: linear-gradient(to right, #f8f9fa, #e9ecef);
}

表头固定
滚动时保持表头可见（需配合 position: sticky）：

th {
  position: sticky;
  top: 0;
  z-index: 10;
}

单元格对齐
通过 text-align 和 vertical-align 控制内容位置：

th { text-align: left; }
td.number { text-align: right; }
td.middle { vertical-align: middle; }