怎样给HTML表格单元格添加边框？CSS样式精确定义线条粗细-html教程-PHP中文网

只写 border-width 没效果是因为 border-style 默认为 none，必须同时设置 border-style（如 solid）和 border-color 才能生效；三者缺一不可，推荐简写为 border: 3px solid #000。

怎样给html表格单元格添加边框？css样式精确定义线条粗细

为什么只写 `border-width` 没效果？

常见现象是写了 border-width: 3px，但单元格边框纹丝不动。原因很直接：border-style 没设，浏览器默认为 none，宽度再大也白搭。

必须同时定义样式（如 solid、dashed）和颜色（哪怕只是 #000），border-width 才会生效。可简写为：border: 3px solid #000，三者缺一不可。

border-style: hidden 比 none 更霸道——某些重置样式（如 normalize.css）会用它，连宽度都无视
调试时看 Chrome DevTools 的 computed 面板，重点查 border-top-style，不是只盯 border-top-width
临时覆盖可用：td { border-style: solid !important; border-width: 3px; }

`border-collapse: collapse` 下怎么加粗外侧边框？

多数现代表格开了 border-collapse: collapse，这时相邻单元格边框会“合并”，单个 td 的 border 设置会被覆盖或取舍——想让左边框粗、下边框粗，得靠方向性控制。

推荐写法：td { border: solid #000; border-width: 2px 1px 2px 2px; }，顺序是上右下左。这样左、上、下边框统一加粗，右边保持细线，视觉更稳。

html-to-pptx

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

下载

首列加粗左边界：td:first-child, th:first-child { border-left-width: 3px; }
最后一行加粗底边：tr:last-child td { border-bottom-width: 2px; }
别忘了给 table 本身加 border，否则外轮廓会断开——table { border: 2px solid #000; }

想整个表格统一粗边框，该设 `table` 还是 `td`？

设 table 只能控制外框；真正影响内部线条粗细的是 td 和 th。复杂表格（含 rowspan/colspan 或嵌套表头）里，table 的 border 基本管不到单元格交界处。

最稳妥的做法：统一设 td, th { border: 2px solid #333; }，再配合 table { border-collapse: collapse; }。这样所有内线、交界、外框都受控，不会出现某条线突然变细的意外。

如果用 border-collapse: separate，则必须配 border-spacing: 0，否则加粗后空隙更显眼
border-spacing 在 IE8 及以下不支持，老项目慎用
移动端 Safari 对小数 border-spacing（如 0.5px）渲染不稳定，只用整数

用内联样式快速加粗某个单元格，要注意什么？

直接写 <td style="border: 3px solid red;"> 是最快的，但容易踩两个坑：一是父级 CSS 可能带 <code>!important 覆盖它；二是若表格已启用 border-collapse: collapse，这个单元格的加粗边框可能被邻近单元格的边框“吃掉”一部分。

解决办法：要么加 !important 强制（仅限调试），要么改用类选择器 + 更高特异性，比如：.highlight-cell { border: 3px solid #e74c3c !important; }，并确保该类应用在 td 上而非 tr 或 table。