tr标签设置border-radius属性不生效的问题咨询

• <tr> 是表格行元素，浏览器默认渲染规则下，该元素本身不支持 border-radius 属性，样式无法被识别应用。
• 你提供的 HTML 存在语法错误：<h2> 属于块级元素，不能作为 <table> 的直接子元素，错误的标签嵌套会破坏表格的渲染结构，进一步影响样式生效。
• 若表格设置了 border-collapse: collapse 属性，会触发边框合并规则，此时所有表格相关元素的圆角样式都会失效。

方案1：给单元格设置圆角（推荐，不会破坏表格原生布局） #

首先修正 HTML 语法错误，将 <h2> 移到 <table> 标签外部。
然后调整 CSS 配置：

1. 给表格设置 border-collapse: separate 关闭边框合并，同时设置 border-spacing: 0 消除单元格间隙
2. 给行内第一个和最后一个单元格分别设置对应方向的圆角

代码示例：

/* 表格基础样式 */
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 80%;
  margin: 0 auto;
}
/* 行边框样式写在单元格上 */
.border th {
  border: 1px solid #eee;
  padding: 8px 12px;
}
/* 第一个单元格设置左圆角 */
.border th:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
/* 最后一个单元格设置右圆角 */
.border th:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

方案2：修改tr的display属性（适合固定宽度表格场景） #

直接修改 tr 的渲染模式，让它支持圆角属性，缺点是会破坏表格原生的自适应布局，需要手动指定单元格宽度：

tr.border {
  display: block;
  border-radius: 8px;
  border: 1px solid #eee;
}
/* 手动指定单元格宽度 */
.border th {
  display: inline-block;
  width: 33.3%;
  padding: 8px 12px;
}

内容的提问来源于stack exchange，提问作者Zain UL Abideen