5月7日

CSS 细边框表格（两种常用写法）
一、原生表格默认问题
默认表格边框双线，因为单元格和表格都有边框，叠加变粗。
二、方法 1：合并边框（最常用）
核心属性
css
border-collapse: collapse; /* 合并相邻边框 */

完整样式
css
table {
width: 100%;
border-collapse: collapse; /* 合并边框，变成单线 /
border: 1px solid #ccc; / 外框细边框 /
}
th,td {
border: 1px solid #ccc; / 单元格细边框 /
padding: 8px 12px; / 内边距 /
text-align: center;
}
/ 表头样式 */
th {
background: #f5f5f5;
}

HTML 结构

姓名 年龄 性别 小明 18 男

三、方法 2：单一边框（缝隙细边框）
不加border-collapse，用间距做细缝边框
css
table {
width: 100%;
border-spacing: 1px; /* 单元格间距=边框粗细 /
background: #ccc; / 缝隙颜色 */
}
th,td {
background: #fff;
padding: 8px;
}

四、常用表格效果
隔行变色
css
tr:nth-child(even) {
background-color: #f9f9f9;
}

鼠标悬停高亮
css
tr:hover {
background: #eef5ff;
}

五、重点总结
做细线单线表格必写：border-collapse: collapse
统一设置 table、th、td 边框颜色一致
调整 border:1px 数值改变边框粗细
优先用合并边框，前端项目最通用