HTML表格行圆角失效的解决方案
在HTML表格中，直接为行元素(<tr>)设置圆角(<code>border-radius)常常无效。这是因为当border-collapse属性设置为collapse时，表格单元格的边框会合并，导致行元素无法单独应用圆角样式。
解决方法：巧用伪元素模拟圆角效果
为了解决这个问题，我们可以利用td或th元素的伪元素来模拟tr元素的圆角效果。通过CSS选择器，我们可以精准地为表格首行和末行设置圆角：
立即学习“前端免费学习笔记（深入）”；
<code class="css">tr {
background: #ddd; /* 设置行背景色 */
}
tr:first-child td,
tr:first-child th {
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
tr:last-child td,
tr:last-child th {
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}</code>这段CSS代码通过选择表格首行(tr:first-child)和末行(tr:last-child)的td和th元素，分别设置其左上角、右上角、左下角和右下角的圆角。这样就能有效地模拟出表格行的圆角效果，即使border-collapse属性设置为collapse也能正常显示。
以上就是HTML表格行圆角无效？如何解决？的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
209
收藏
