css细线表格制作

使用border-collapse属性合并边框

设置表格的border-collapse为collapse，使相邻单元格的边框合并为单一线条，避免默认的双边框效果。搭配border属性定义细线样式：

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

通过box-shadow模拟细线

利用box-shadow的inset特性创建内阴影效果，实现视觉上的细线表格。此方法适合需要极细边框（如0.5px）的场景：

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

伪元素绘制边框线

通过::after或::before伪元素结合绝对定位，精准控制边框线的粗细和颜色。适合对特定边进行自定义：

tr {
  position: relative;
}
tr::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.5px;
  background: #eee;
}

使用rgba颜色控制透明度

采用rgba颜色值定义边框，通过透明度调节实现视觉上的细线效果。搭配浅色系可增强纤细感：

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

媒体查询适配高清屏

针对高DPI设备使用min-resolution媒体查询，通过transform缩放实现物理像素级的细线：

@media (-webkit-min-device-pixel-ratio: 2) {
  .thin-border {
    transform: scale(0.5);
    transform-origin: 0 0;
  }
}