
HTML表格行圆角失效的解决方案
在HTML表格中,直接为行元素( 解决方法:巧用伪元素模拟圆角效果 为了解决这个问题,我们可以利用 立即学习“前端免费学习笔记(深入)”; 这段CSS代码通过选择表格首行()设置圆角( border-radius)常常无效。这是因为当border-collapse属性设置为collapse时,表格单元格的边框会合并,导致行元素无法单独应用圆角样式。
td或th元素的伪元素来模拟tr元素的圆角效果。通过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;
}
tr:first-child)和末行(tr:last-child)的td和th元素,分别设置其左上角、右上角、左下角和右下角的圆角。这样就能有效地模拟出表格行的圆角效果,即使border-collapse属性设置为collapse也能正常显示。











