CSS设置table表格左上角、右上角border-radius不生效问题求助

核心问题原因 #

• table默认border-collapse属性为collapse，该模式下border-radius无法生效
• 直接给tr元素设置border-radius无效：原生表格布局中tr本身不支持边框圆角属性
• 你给table设置了圆角但未配置overflow: hidden，表格内部tr的蓝色背景会溢出圆角区域，视觉上看不出圆角效果

修正方案 #

直接替换你的CSS为以下内容即可实现左上角、右上角圆角效果：

table{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px; /* 右上角圆角配置 */
  border-collapse: separate;
  border-spacing: 0; /* 消除单元格默认间距，避免出现缝隙 */
  overflow: hidden; /* 裁剪超出圆角范围的内部内容 */
}
#flightsHeader{
  height: 3em;
  background-color: #2E9CFE;
  color: white;  
}

补充说明 #

如果修改后还是不生效，可以打开浏览器开发者工具的元素样式面板，检查table的上述属性是否被其他更高优先级的样式覆盖，按需调整优先级即可。

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