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

Question

编辑-原标题:是否有其他方式来实现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)来设置角落的样式.这个解决方案也有效,但仍然不是我想要的(我知道我很挑剔).我有两个保留意见:

1. 这是一个非常轻量级的网站,我希望将JavaScript保持在最低限度
2. 使用border-radius对我来说具有优雅降级和渐进增强的部分吸引力.通过对所有圆角使用border-radius,我希望在支持CSS3的浏览器中拥有一致的圆形网站,在其他浏览器中拥有一致的方形网站(我正在看着你,IE).

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

Answer 1

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

圆角的问题是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).

Answer 2

以下方法使用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;
}

Answer 3

如果你想要一个只有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;
    }
         

<div class="custom-table">
    <table>
        <tr>
            <th>item1</th>
            <th>item2</th>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
    </table>
</div>

Answer 4

你试过用table{border-spacing: 0}而不是table{border-collapse: collapse}???

Answer 5

您可能需要在表格周围放置另一个元素并使用圆形边框进行样式设置.

该工作草案指定是border-radius不适用于表格元素时的值border-collapse是collapse.

Answer 6

正如Ian所说,解决方案是将表嵌套在div中并将其设置为:

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

有了overflow:hidden,方角不会通过div流血.

Answer 7

这是一个方法：

div {
  border: 2px solid red;
  overflow: hidden;
  border-radius: 14px;
  transform: rotate(0deg);
}
table {
  border-spacing: 0;
  background-color: blue;
  height: 100%;
  width: 100%;
}

<div>
  <table>
    <tr>
      <td><br></td> 
    </tr>
  </table>
</div>

或者

    div {
      ...
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      z-index: 1;
    }
        
        

Answer 8

据我所知,你能做到的唯一方法是修改所有单元格,如下所示:

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;
}

:last-child在ie6中无效,但如果你使用border-radius我假设你不在乎.

编辑:

查看您的示例页面后,您似乎可以使用单元格间距和填充来解决此问题.

您看到的厚灰色边框实际上是表格的背景(如果将边框颜色更改为红色,则可以清楚地看到这一点).如果将cellspacing设置为零(或等效:),td, th { margin:0; }灰色"边框"将消失.

编辑2:

我只能用一张桌子找不到办法.如果您将标题行更改为嵌套表,您可能可以获得所需的效果,但它将更多工作,而不是动态.

Answer 9

我尝试了解决方法使用伪元素:before,并:after在thead th:first-child与thead th:last-child

与用桌子包裹桌子相结合 <div class="radius borderCCC">

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;
}

见jsFiddle

适用于我的Chrome(13.0.782.215)让我知道这是否适用于其他浏览器.

Answer 10

给定的答案仅在桌子周围没有边框时才有效，这是非常有限的！

我在 SASS 中有一个宏来执行此操作，它完全支持外部和内部边框，实现与 border-collapse: collapse 相同的样式，而无需实际指定它。

在 FF/IE8/Safari/Chrome 中测试。

在所有浏览器中的纯 CSS 中提供漂亮的圆形边框，但 IE8（优雅地降级），因为 IE8 不支持边框半径 :(

一些较旧的浏览器可能需要供应商前缀才能使用border-radius，因此可以根据需要随意将这些前缀添加到您的代码中。

这个答案不是最短的 - 但它有效。

.roundedTable {
  border-radius: 20px / 20px;
  border: 1px solid #333333;
  border-spacing: 0px;
}
.roundedTable th {
  padding: 4px;
  background: #ffcc11;
  border-left: 1px solid #333333;
}
.roundedTable th:first-child {
  border-left: none;
  border-top-left-radius: 20px;
}
.roundedTable th:last-child {
  border-top-right-radius: 20px;
}
.roundedTable tr td {
  border: 1px solid #333333;
  border-right: none;
  border-bottom: none;
  padding: 4px;
}
.roundedTable tr td:first-child {
  border-left: none;
}

要应用此样式，只需更改您的

<table>

标记到以下内容：

<table class="roundedTable">

并确保在您的 HTML 中包含上述 CSS 样式。

希望这可以帮助。

Answer 11

我刚刚为此编写了一组疯狂的 CSS，看起来效果很好：

    table {
      border-collapse: separate;
      border-spacing: 0;
      width: 100%;
    }
    table td,
    table th {
      border-right: 1px solid #CCC;
      border-top: 1px solid #CCC;
      padding: 3px 5px;
      vertical-align: top;
    }
    table td:first-child,
    table th:first-child {
      border-left: 1px solid #CCC;
    }
    table tr:last-child td,
    table tr:last-child th {
      border-bottom: 1px solid #CCC;
    }
    table thead + tbody tr:first-child td {
      border-top: 0;
    }
    table thead td,
    table th {
      background: #EDEDED;
    }
    
    /* complicated rounded table corners! */
    table thead:first-child tr:last-child td:first-child {
      border-bottom-left-radius: 0;
    }
    table thead:first-child tr:last-child td:last-child {
      border-bottom-right-radius: 0;
    }
    table thead + tbody tr:first-child td:first-child {
      border-top-left-radius: 0;
    }
    table thead + tbody tr:first-child td:last-child {
      border-top-right-radius: 0;
    }
    table tr:first-child td:first-child,
    table thead tr:first-child td:first-child {
      border-top-left-radius: 5px;
    }
    table tr:first-child td:last-child,
    table thead tr:first-child td:last-child {
      border-top-right-radius: 5px;
    }
    table tr:last-child td:first-child,
    table thead:last-child tr:last-child td:first-child {
      border-bottom-left-radius: 5px;
    }
    table tr:last-child td:last-child,
    table thead:last-child tr:last-child td:last-child {
      border-bottom-right-radius: 5px;
    }

<table>
  <thead>
    <tr>
      <th>
        Table Head
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Table Data
      </td>
    </tr>
  </tbody>
</table>

/* end complicated rounded table corners !*/

Answer 12

实际上你可以添加你的table内部div作为其包装.然后将这些CSS代码分配给包装器:

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

table {
  border-collapse: collapse;
}