HTML表格如何设置每行的边框样式（代码分享）-html教程-PHP中文网

tr元素无法设置边框，因其不参与盒模型绘制；必须通过td/th设置边框，并配合border-collapse属性控制合并效果，否则会出现双线、断线或无效问题。

html表格如何设置每行的边框样式（代码分享）

直接给 tr 元素设 border 是无效的——浏览器不渲染 tr 的边框，哪怕写了也不会显示。

为什么 `tr { border: 1px solid red; }` 没反应

HTML 表格的渲染模型里，tr 本身不参与盒模型绘制，它的边框属性被忽略。真正起作用的是 td 和 th 的边框，以及 table 的 border-collapse 状态。

即使你用开发者工具看到 tr 样式生效，页面上依然看不到边框
tr 上设置 outline 倒是能显示（但会破坏布局，且不是边框）
想“高亮某一行”，必须操作它内部的单元格，比如 tr:nth-child(2) td

给某一行加顶部/底部边框的正确写法

用伪类选择器定位目标行，再给它的所有单元格统一加某一边的边框：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

/* 第二行加粗顶边和底边 */
tr:nth-child(2) td,
tr:nth-child(2) th {
  border-top: 2px solid #007acc;
  border-bottom: 2px solid #007acc;
}
<p>/<em> 最后一行只加底边（避免重复） </em>/
tr:last-child td,
tr:last-child th {
border-bottom: 1px solid #999;
}</p>

别漏掉 th，否则表头和数据行边框不一致
如果用了 border-collapse: collapse，相邻单元格的同向边框会合并，所以 border-top + border-bottom 是安全的
要避免上下两行都设 border-bottom 导致双倍粗细，可用 :not(:last-child) 过滤

隔行变色 + 边框强化的实用组合

单纯加边框容易让表格显得沉重，配合背景色和边框颜色微调，可提升可读性而不增加视觉噪音：

tr:nth-child(even) td,
tr:nth-child(even) th {
  background-color: #f9f9f9;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
<p>tr:hover td,
tr:hover th {
background-color: #eef7ff !important;
border-top: 1px solid #007acc;
border-bottom: 1px solid #007acc;
}</p>

border-top/bottom 比四边都设更轻量，也更符合阅读流（人眼横向扫视）
:hover 时加边框比始终显示更友好，尤其在密集表格中
注意 !important 在 :hover 中常需加，防止被隔行背景的样式覆盖

真正难的不是“怎么加”，而是“加在哪”——tr 是个幻影容器，所有边框操作最终都得落到 td 或 th 上，且必须和 border-collapse 配合。漏掉其中一环，就容易出现双线、断线或干脆没反应。