您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

CSS3的border-radius属性和border-collapse:collapse不能混合使用。如何使用边框半径创建带有圆角的折叠表格?

CSS3的border-radius属性和border-collapse:collapse不能混合使用。如何使用边框半径创建带有圆角的折叠表格?

我想到了。您只需要使用一些特殊的选择器即可。

圆角化表格的问题是td元素也没有变圆。您可以通过执行以下操作来解决此问题:

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

现在一切正常,除了仍然存在border-collapse: collapse破坏所有内容的问题。

一种解决方法是在表上添加border-spacing: 0认值并保留认值border-collapse: separate

CSS 2022/1/1 18:20:54 有688人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶