HTML表格怎么设置内边框和外边框（技巧分享）-html教程-PHP中文网

html表格内边框不显示的根本原因是未启用border-collapse: collapse或未同步设置table、th、td的border；仅用border="1"会触发separate模型及默认2px间距，导致边框断开。

html表格怎么设置内边框和外边框（技巧分享）

HTML表格的“内边框”和“外边框”不是两个独立开关，而是由 border-collapse + border 在不同元素上的组合控制——不设 border-collapse: collapse，border 就会失效或出双线。

为什么加了 `border="1"` 还没内边框？

因为 border="1" 是 HTML4 遗留属性，它只触发默认的 border-collapse: separate 模型，且自带 border-spacing: 2px。结果就是：单元格之间有白缝、边框断开、th 和 td 的边框各自渲染，看起来像“虚线”或“不连贯”。现代浏览器已将其降级为兼容层，实际等价于：

table { border-collapse: separate; border-spacing: 2px; }

所以它根本不能可靠生成内边框，更别说统一内外边框了。

`table`、`th`、`td` 的 `border` 要一起设

单设 table { border: 1px solid #000 } 只画外边框；单设 td { border: 1px solid #000 } 只画内边框（但可能双线）。正确做法是三者同步声明，再用 border-collapse: collapse 合并：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

table 控制外边框粗细/颜色/样式
th 和 td 控制内边框，值通常与外边框一致；若不一致（比如 th { border-bottom: 2px solid #333 }），交界处会加粗
必须把 border-collapse: collapse 加在 table 上，不能加在 td 或 th 上，否则无效

想让外边框粗一点、内边框细一点怎么办？

可以，但得绕开“合并后取最大值”的默认行为。关键在于：只给 table 设外边框，th/td 只设部分边（如仅 border-bottom 和 border-right），再配合 border-collapse: collapse：

table {
  border: 2px solid #222;
  border-collapse: collapse;
}
th, td {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

这样外边框是 2px 实线，内部横竖线是 1px ——但要注意：th:first-child 和 td:last-child 的左侧/顶部边框会缺失，需手动补：

补左边界：th:first-child, td:first-child { border-left: 1px solid #ccc; }
补顶边界：tr:first-child th, tr:first-child td { border-top: 1px solid #ccc; }

圆角外边框 + 内边框怎么不溢出？

border-radius 只对 table 生效，但内边框（th/td）默认会撑出圆角区域。解决办法就一个：overflow: hidden 必须加在 table 上：

table {
  border: 1px solid #666;
  border-radius: 6px;
  overflow: hidden; /* 关键！否则内边框从圆角里钻出来 */
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
}

漏掉 overflow: hidden 是最常被忽略的点——它不报错、不警告，但视觉上圆角就“破了”。