HTML为表格行/单元格设置下边框内联样式不生效，求原因排查

为什么直接给<tr>加边框样式无效 #

• 在HTML表格的默认渲染规则中，<tr>仅作为逻辑行容器存在，不承担实际的边框绘制职责。默认的分离边框（border-collapse: separate）模式下，浏览器会将所有边框渲染逻辑下沉到最内层的<td>/<th>单元格节点，直接写在<tr>上的边框样式会被直接忽略，不会绘制到页面上。
• 即便手动给表格开启了合并边框（border-collapse: collapse）模式，直接给<tr>写边框的跨浏览器兼容性也很差，不同引擎的渲染表现不一致，行业通用的规范写法都是将边框样式配置在单元格节点上。

为什么改给<td>加边框仍然无效 #

核心问题出在你写的内联样式本身的语法兼容性和写法错误上

• CSS的border简写语法本身存在解析歧义：你写的样式border: 0px 0px 3px 0px solid #97298f，是把四个方向的宽度值直接堆在简写最前面，虽然在最新的CSS标准中这组值理论上可以被正确解析，但大量浏览器的渲染引擎对这类多值混排的简写兼容性极差，会直接判定整段样式无效，放弃渲染对应的边框。
• 额外的常见坑：你没有给外层<table>节点设置合并边框配置，默认的单元格间隙（cellspacing）会把相邻单元格的边框打散，哪怕部分样式生效，也会出现边框断裂、错位的问题，看起来像完全没生效。
• 排查时需要额外检查内联样式的引号闭合，你提供的代码段里存在嵌套双引号未转义的问题，会直接截断style字符串，导致后续所有绑定的样式解析失效。

正确的修复步骤 #

1. 给外层<table>标签补充合并边框配置，消除默认间隙对边框的影响：

   <table style="border-collapse: collapse;">
     <!-- 表格内部内容 -->
   </table>
   

2. 把单元格上的错误简写样式替换为单方向的合法写法，你本身只需要给单元格加底部3px的紫色实线，直接写border-bottom即可，无需堆砌多值宽度：

   <!-- 原错误写法 -->
   <td style="border: 0px 0px 3px 0px solid #97298f;" width="75%" colspan="3">
   <!-- 替换为正确写法 -->
   <td style="border-bottom: 3px solid #97298f;" width="75%" colspan="3">
   

3. 同一行的两个跨列单元格都要应用完全一致的下边框样式，这样两个单元格的边框会拼接成连贯的行底边线，不会出现分段断裂的问题。

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