css细线表格制作

使用border-collapse和border-spacing属性

设置表格的border-collapse为collapse，使相邻单元格的边框合并为单一线条。通过border-spacing调整边框间距为零，确保线条更细。

table {
  border-collapse: collapse;
  border-spacing: 0;
}
td, th {
  border: 1px solid #ddd;
  padding: 8px;
}

使用伪元素增强线条精细度

通过::before或::after伪元素创建细线，结合绝对定位和缩放变换实现亚像素级别的线条效果。

td {
  position: relative;
}
td::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #ddd;
  transform: scaleY(0.5);
}

通过box-shadow模拟细边框

利用box-shadow的扩散特性创建视觉上的细线，避免传统边框的像素限制问题。

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

使用SVG背景图案

采用SVG矢量图形作为表格背景，通过矢量特性实现完美适配各种分辨率的细线。

table {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0' y1='100%' x2='100%' y2='100%' stroke='%23ddd' stroke-width='0.5'/></svg>");
}

高分辨率设备适配方案

针对Retina等高清屏幕，结合媒体查询和变换缩放技术优化显示效果。

@media (-webkit-min-device-pixel-ratio: 2) {
  td::after {
    transform: scaleY(0.25);
  }
}

现代CSS变量控制方案

使用CSS自定义属性统一管理线条样式，便于全局调整和主题切换。

:root {
  --table-line-color: #eee;
  --table-line-width: 0.5px;
}
td {
  border: var(--table-line-width) solid var(--table-line-color);
}