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;
}
tr:hover {
  background-color: #e6f7ff;
}

表头样式设计 用渐变背景和固定高度突出表头，文字阴影增加立体感。

th {
  background: linear-gradient(#4CAF50, #45a049);
  color: white;
  height: 50px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

圆角与阴影 通过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) {
  table {
    display: block;
    overflow-x: auto;
  }
}

斑马条纹进阶版 结合伪元素实现更复杂的条纹效果，可配合透明度调整。

tr:nth-child(odd) {
  position: relative;
}
tr:nth-child(odd)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.03);
  z-index: -1;
}

单元格强调设计 对特殊数据单元格添加醒目标识，如使用不同边框或背景色。

td.highlight {
  background-color: #fffacd;
  border: 2px solid #ffd700;
}