表格中border-radius不生效
时间: 2024-03-20 11:34:52 浏览: 58
解决border-radius失效问题
5星 · 资源好评率100%
在表格中设置圆角时,有时候会出现圆角不生效的情况。这可能是由于表格的边框合并(border-collapse)属性导致的。当表格的边框合并属性设置为collapse时,圆角将不会生效。解决这个问题的方法是将表格的边框合并属性设置为separate。另外,如果你想要在表格中设置圆角,你需要将圆角属性分别应用于表格的th和td元素,而不是应用于表格本身。下面是一个示例代码:
```css
.computedtable th:first-child {
border-top-left-radius: 12px;
}
.computedtable th:last-child {
border-top-right-radius: 12px;
}
.computedtable tr:last-child td:first-child {
border-bottom-left-radius:12px;
}
.computedtable tr:last-child td:last-child {
border-bottom-right-radius: 12px;
}
.computedtable {
border-collapse: separate;
}
```
阅读全文