css制作细线表格

使用 border-collapse 属性

通过设置 border-collapse: collapse; 可以让表格边框合并为单一线条，避免默认的双线边框效果。配合 border: 1px solid #ddd; 定义边框样式。

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

使用伪元素增强控制

通过 :after 伪元素为单元格添加细线，可以更灵活地控制线条位置和样式。此方法适合需要部分边框或特殊线条的场景。

td {
  position: relative;
  padding: 10px;
}
td:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #eee;
}

调整边框颜色和透明度

通过降低边框颜色的透明度或使用浅色系，可以让线条视觉上更纤细。例如使用 rgba(0,0,0,0.1) 或浅灰色。

table {
  border-collapse: collapse;
}
td {
  border: 1px solid rgba(0,0,0,0.1);
}

使用 box-shadow 替代边框

box-shadow 可以创建比物理边框更精细的线条效果，尤其适合需要亚像素级渲染的场景。

td {
  box-shadow: 0 0 0 0.5px #ccc;
}

响应式表格的细线处理

针对移动设备，可以通过媒体查询调整线条粗细。通常移动端需要更细的线条（如0.5px）。

@media (max-width: 600px) {
  td {
    border-width: 0.5px;
  }
}