td设置border-radius不生效
时间: 2023-10-31 21:05:52 浏览: 60
当在table中设置td的border-radius时,可能会遇到不生效的问题。这通常是因为table元素的CSS属性border-collapse设置为collapse,而border-radius与该属性不兼容。 在这种情况下,你可以尝试使用border-spacing属性将border-collapse设置为separate,这样可以解决该问题。
另外,你还需要给td元素设置border属性以达到最终的效果。可以通过给td添加border-right和border-bottom样式来实现表格的边框效果。例如:
```css
td {
text-align: center;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
td:last-child {
border-right: 0;
}
tr:last-child td {
border-bottom: 0;
}
```
这样,你就可以在td元素上设置border属性,同时保持border-radius生效。
相关问题
表格中border-radius不生效
在表格中设置圆角时,有时候会出现圆角不生效的情况。这可能是由于表格的边框合并(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;
}
```
border-collapse:collapse boder-radius 不起作用
`border-collapse: collapse` 是用来合并表格边框的属性,它会将相邻单元格的边框合并为一条边框,因此 `border-radius` 不会起作用。如果想要为表格单元格设置圆角,可以将 `border-collapse` 属性设置为 `separate`,并分别设置每个单元格的边框样式及圆角。示例代码如下:
```css
table {
border-collapse: separate;
border-spacing: 0;
}
td {
border: 1px solid #000;
border-radius: 10px;
}
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)