如何仅为HTML表格的<tbody>和<tr>添加边框？

咱们先理清楚问题出在哪，再一步步解决：

首先你的CSS代码里有语法错误，这是边框不生效的核心原因！CSS里属性和值之间得用冒号:分隔，不是等号=，而且多个属性必须用分号;拆开。比如你写的border= 0px、page-break-after:auto border=1px solid black;都是不符合规范的，浏览器根本读不懂这些规则。

然后说回你的疑问：tbody、tr、thead、tfoot这些元素完全可以单独设置边框，只是你没掌握对表格边框的渲染逻辑。

正确的解决步骤 #

先修正语法，再通过border-collapse属性控制边框合并，就能精准实现只给tbody和tr加边框的需求：

修改后的完整CSS代码

table { 
  page-break-inside: auto; 
  border: 0; /* 去掉表格整体边框 */
  border-collapse: collapse; /* 关键：让行和单元格的边框合并显示 */
}
tr { 
  page-break-inside: avoid; 
  page-break-after: auto; 
  border: 1px solid black; /* 给所有行加上边框 */
}
thead { 
  display: table-header-group; 
  border: 0; /* 去掉thead的边框 */
}
tfoot { 
  display: table-footer-group; 
  border: 0; /* 去掉tfoot的边框 */
}
/* 单独去掉thead和tfoot里的行边框 */
thead tr, tfoot tr {
  border: none;
}
/* 可选：给tbody加个外层粗边框 */
tbody {
  border: 2px solid black;
}

为什么这样就能生效？

1. 语法修正：把错误的border= 0px改成标准的border: 0;，拆分了连写的属性，让浏览器能正确解析每一条规则。
2. border-collapse: collapse：默认表格是separate模式，这种模式下tr的边框会被td/th的边框挡住，根本显示不出来；改成collapse后，行和单元格的边框会合并，tr的边框就能正常显示了。
3. 精准控制：通过给thead tr和tfoot tr单独设置border: none，就能只保留tbody里的行边框，还能按需给tbody本身加外层边框。

你之前尝试失败，主要是因为语法错误和没搞懂边框合并的逻辑，按照上面的代码调整就能实现你想要的效果啦。

内容的提问来源于stack exchange，提问作者Raky