本文将探讨在css中使用 `border-collapse: separate` 和 `border-spacing` 为html表格创建行间距时，`border-radius` 属性在 `
` 元素上失效的问题。我们将详细介绍一种有效的解决方案：通过将圆角样式精确地应用于每行中的第一个和最后一个 “ 或 `
理解 border-collapse: separate 与 border-radius 的冲突
在Web开发中，我们经常需要为表格添加样式，使其更具视觉吸引力。其中一个常见的需求是为表格行（
）添加圆角边框，并使行之间保持一定的间距。为了实现行间距，CSS提供了 border-collapse: separate 属性配合 border-spacing 属性。border-collapse: separate 允许表格单元格拥有独立的边框和间距，这与默认的 border-collapse: collapse 行为（单元格边框合并）形成对比。
然而，当尝试直接将 border-radius 属性应用于
元素时，即使设置了 border-collapse: separate，圆角效果也往往无法正确显示。这是因为 元素在渲染模型中通常不直接参与边框的绘制，其边框和背景通常由其内部的 或
元素并不能使其子元素（单元格）的外部边缘呈现圆角。
考虑以下初始代码示例，它尝试为表格行设置圆角和间距：
| Company | Progress | Location | Payment | |
|---|---|---|---|---|
| Time Developments | [email protected] | In Progress | You48 | $200 |
/* 初始CSS样式 */body { font-family: 'Plus Jakarta Sans', sans-serif; font-family: 'Poppins', sans-serif; font-family: 'Roboto', sans-serif; color: #2E384D; background-color: #F5F7FC;}table { width: 70vw; border-collapse: separate; /* 允许行间距 */ border-spacing: 0 15px; /* 设置垂直行间距 */}tr:nth-child(even) { background-color: white;}tr:nth-child(odd) { background-color: #f1f2f6;}tr { border: 1px solid black; border-radius: 15px; /* 此处设置的圆角不会生效 */}th { background-color: #FFFFFF; background-color: #2B59FF; color: white; padding-left: 40px; padding-right: 40px; padding-top: 10px; padding-bottom: 10px; font-weight: bold;}td { padding-top: 25px; padding-bottom: 25px; padding-left: 15px; font-weight: 100;}
在此示例中，尽管为
设置了 border-radius: 15px;，但实际渲染结果中行边框依然是直角，无法看到预期的圆角效果。
解决方案：将圆角应用于单元格边缘
解决此问题的关键在于理解表格渲染的机制：实际
以上就是解决 border-collapse: separate 下表格行圆角失效问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1585896.html
微信扫一扫 
支付宝扫一扫 
