css制作细线表格

使用border-collapse属性

将表格的border-collapse属性设置为collapse，使相邻单元格的边框合并为单一线条。这种方法能消除默认的双边框效果，形成细线表格。

table {
  border-collapse: collapse;
}
td, th {
  border: 1px solid #000;
}

设置边框宽度和颜色

直接为单元格设置1像素的实线边框。注意现代高分辨率屏幕可能使1px边框显示较粗，可通过调整颜色或使用伪元素优化。

td, th {
  border: 1px solid #ddd; /* 浅色更显细 */
  padding: 8px;
}

使用伪元素精细控制

通过伪元素创建绝对定位的细线，解决高DPI设备上1px显示过粗的问题。这种方法适合对细节要求极高的设计。

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

结合border-spacing属性

当需要保留单元格间距时，使用border-spacing配合separate模式。注意此模式下需确保相邻边框颜色一致。

table {
  border-spacing: 0;
}
td, th {
  border: 1px solid #000;
}

响应式细线表格

针对移动设备优化，使用媒体查询调整边框样式。小屏幕下可改用更细的边框或减少视觉干扰。

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

使用CSS变量统一管理

通过CSS变量集中控制边框样式，便于整体调整和维护。

:root {
  --table-border: 1px solid #e1e1e1;
}
td, th {
  border: var(--table-border);
}