CSS3的border-radius属性和border-collapse:collapse不混合.如何使用border-radius创建带圆角的折叠表？

编辑-原标题:是否有其他方式来实现border-collapse:collapse的CSS(为了有倒塌,圆角表)？

因为事实证明只是让表格的边框崩溃并不能解决根本问题,所以我更新了标题以更好地反映讨论.

我正在尝试使用该CSS3 border-radius属性制作带圆角的桌子.我正在使用的表格样式如下所示:

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

这是问题所在.我也想设置border-collapse:collapse属性,当设置border-radius不再有效时.是否有基于CSS的方式我可以获得与border-collapse:collapse没有实际使用它相同的效果？

编辑:

我做了一个简单的页面来演示这里的问题(仅限Firefox/Safari).

似乎问题的很大一部分是将表设置为圆角不会影响角td元素的角落.如果表格都是一种颜色,这不会是一个问题,因为我可以td分别为第一行和最后一行制作圆角和倒角.但是,我使用不同的背景颜色来区分标题和条纹,因此内部td元素也会显示其圆角.

建议的解决方案摘要:

桌子周围有另一个圆角的元素不起作用,因为桌子的方角"渗透".

将边框宽度指定为0不会折叠表.

底部td四角设置CELLSPACING零后仍然广场.

使用JavaScript代替 - 避免问题.

可能的解决方案:

这些表是用PHP生成的,所以我可以为每个外部的t/tds应用一个不同的类,并分别为每个角设置样式.我宁愿不这样做,因为它不是很优雅,并且应用于多个表格有点痛苦,所以请保持建议.

可能的解决方案2是使用JavaScript(特别是jQuery)来设置角落的样式.这个解决方案也有效,但仍然不是我想要的(我知道我很挑剔).我有两个保留意见:

这是一个非常轻量级的网站,我希望将JavaScript保持在最低限度

使用border-radius对我来说具有优雅降级和渐进增强的部分吸引力.通过对所有圆角使用border-radius,我希望在支持CSS3的浏览器中拥有一致的圆形网站,在其他浏览器中拥有一致的方形网站(我正在看着你,IE).

我知道今天尝试用CSS3做这件事似乎是不必要的,但我有我的理由.我还想指出,这个问题是w3c规范的结果,而不是CSS3支持不好,所以当CSS3得到更广泛的支持时,任何解决方案仍然具有相关性和实用性.

我想到了.你只需要使用一些特殊的选择器.

圆角的问题是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在html中设置(感谢Joel).

以下方法使用box-shadow带有扩展1px而不是"真实"边框的方法(在Chrome中测试).

table {
    border-collapse: collapse;
    border-radius: 30px;
    border-style: hidden; /* hide standard table (collapsed) border */
    box-shadow: 0 0 0 1px #666; /* this draws the table border  */ 
}

td {
    border: 1px solid #ccc;
}

如果你想要一个只有CSS的解决方案(不需要cellspacing=0在HTML中设置)允许1px边框(你不能用border-spacing: 0解决方案),我更喜欢做以下事情:

设置一个border-right和border-bottom表格单元格(td和th)

给第一行中的单元格aborder-top

给第一列中的单元格aborder-left

使用first-child和last-child选择器,围绕四个角中的表格单元格的相应角.

在这里看一个演示.

给出以下HTML:

请参见下面的示例:

   

 .custom-table{margin:30px;}
    table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 350px;
        
    }
    table tr th,
    table tr td {
        border-right: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        padding: 5px;
    }
    table tr th:first-child, table tr th:last-child{
    border-top:solid 1px      #bbb;}
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
        
    }
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
    }
    table tr th {
        background: #eee;
        text-align: left;
    }
    
    table.Info tr th,
    table.Info tr:first-child td
    {
        border-top: 1px solid #bbb;
    }
    
    /* top-left border-radius */
    table tr:first-child th:first-child,
    table.Info tr:first-child td:first-child {
        border-top-left-radius: 6px;
    }
    
    /* top-right border-radius */
    table tr:first-child th:last-child,
    table.Info tr:first-child td:last-child {
        border-top-right-radius: 6px;
    }
    
    /* bottom-left border-radius */
    table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }
    
    /* bottom-right border-radius */
    table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }
         

    

        

            
item1
            
item2
        
        

            
item1
            
item2
        
        

            
item1
            
item2
        
        

            
item1
            
item2
        
    

.table_wrapper {
  border-radius: 5px;
  overflow: hidden;
}

table td {
  border-right-width: 0px;
  border-bottom-width: 0px;
}

table tr td:last-child {
  border-right-width: 1px;
}
table tr:last-child td {
  border-bottom-width: 1px;
}

table thead th:first-child:before{ 
    content:" ";
    position:absolute;
    top:-1px;
    left:-1px;
    width:15px;
    height:15px;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc; 
    -webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{ 
    content:" "; 
    position:absolute; 
    top:-1px;
    right:-1px; 
    width:15px;
    height:15px;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    -webkit-border-radius:0px 5px 0px 0px;
}

.table-wrapper {
  border: 1px solid #f00;
  border-radius: 5px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}