css细线表格制作
使用 border-collapse 和 border-spacing
通过设置 border-collapse: collapse 可以让表格边框合并为单一线条，结合 border: 1px solid #ccc 实现细线效果。
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}使用伪元素增强控制
通过 ::before 或 ::after 伪元素绘制细线，适合需要自定义线条颜色的场景。
td {
position: relative;
padding: 8px;
}
td::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #e0e0e0;
}通过 box-shadow 模拟边框
box-shadow 可以绘制不占空间的细线，适合不影响布局的边框需求。
td {
padding: 8px;
box-shadow: 0 0 0 1px #ddd;
}使用 background 渐变
线性渐变可以创建水平或垂直的细线，适合分隔行或列的场景。
tr {
background: linear-gradient(to bottom, transparent 99%, #eee 1%);
background-size: 100% 1px;
background-repeat: no-repeat;
}结合 nth-child 实现斑马线
通过 nth-child(even) 和透明边框实现交替行细线效果。
tr:nth-child(even) td {
border-top: 1px solid rgba(0,0,0,0.1);
border-bottom: 1px solid rgba(0,0,0,0.1);
}注意事项
- 移动端适配建议使用
min-width: 0防止表格溢出 - 高清屏幕可使用
0.5px边框，但需测试浏览器兼容性 - 打印样式需单独设置
@media print下的边框颜色
