表格边框看起来像双线是因为默认border-collapse: separate导致单元格边框独立显示且叠加；必须将border-collapse: collapse设在table元素上，并统一设置table、th、td的border样式才能实现单线效果。
为什么表格边框看起来像双线？
你给 table、th、td 都写了 border: 1px solid #000，结果边框粗得离谱——这不是 bug，是浏览器默认的 border-collapse: separate 在作祟。每个单元格自带独立边框，加上默认的 border-spacing（通常为 2px），相邻边框不合并，视觉上就是两条线叠在一起。
-
border-collapse: collapse必须加在table元素上，不能只写在th或td上 - 旧式写法如
cellspacing="0"只能消除间距，无法解决边框重叠问题 - 如果同时用了 HTML 的
border属性（如<table border="1">）和 CSS 边框，会叠加干扰，建议彻底弃用 HTMLborder属性
最简可靠的单线边框写法
别绕弯子，直接用这套组合：
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px 12px;
}-
border-collapse: collapse是核心，它让相邻单元格的边框“吸”成一条线 -
th和td必须都设border，否则表头或数据单元格会漏边 - 如果只要外边框、不要内线，就只给
table设border，不给th/td设——但这时就不是“单线表格”，而是“带外框的空白容器”
想加圆角或阴影？注意 overflow 隐藏
给 table 加 border-radius 时，如果不配 overflow: hidden，圆角会被单元格内容撑破，尤其在有 padding 或文字溢出时。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
table {
border-collapse: collapse;
border-radius: 6px;
overflow: hidden; /* 关键！否则圆角无效 */
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}-
border-radius对table生效的前提是：它必须是块级元素（默认就是），且没有border-collapse: separate -
overflow: hidden不仅封住圆角，还能裁掉box-shadow溢出部分，让效果干净 - 别试图给
th或td单独加border-radius——它们在collapse模式下不响应圆角
不同边框样式怎么单独控制？
需要顶部加粗、右侧虚线、底部双线？靠 border-top、border-right 等单边属性，配合伪类精准定位。
立即学习“前端免费学习笔记（深入）”；
/* 第一行表头顶部加粗 */
th:first-child {
border-top: 2px solid #333;
}
<p>/<em> 最后一列右侧加虚线 </em>/
td:last-child,
th:last-child {
border-right: 1px dashed #999;
}</p><p>/<em> 底部行整体加双线 </em>/
tr:last-child td {
border-bottom: 3px double #666;
}- 伪类如
:first-child、:last-child、:nth-child(odd)要作用在th/td上才有效，对tr用容易受空单元格干扰 - 避免在
table上用border-bottom代替行底边——它只画在外围，不参与单元格对齐 - 如果用了
border-collapse: collapse，border-spacing就完全失效，别再尝试用它调间隙
实际项目里最容易被忽略的，是 border-collapse 的继承性和重置成本：一旦你在某个组件里用了 collapse，后续所有嵌套表格若没显式声明，都会沿用这个行为——而某些第三方 UI 库（比如老版本 Bootstrap Table）可能依赖 separate 模式，强行覆盖反而引发错位。动手前先查查父级样式。
