Code
2023-12-08 08:00:05

边界-半径属性和边界-崩溃:崩溃不能混合。我如何使用border-radius创建一个圆角折叠表?

我试图使用CSS border-radius属性制作一个圆角表。我使用的表格样式是这样的:

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

问题来了。我还想设置border-collapse:collapse属性，当设置border-radius时，它不再起作用。是否有一种基于css的方式，我可以得到相同的效果边界崩溃:崩溃而不实际使用它?

似乎很大一部分问题是，将表格设置为圆角并不影响角td元素的角。如果表格都是一种颜色，这就不是问题，因为我可以让顶部和底部td角分别为第一行和最后一行圆角。但是，我使用了不同的背景色来区分标题和条纹，所以内部td元素也会显示它们的圆角。

用另一个圆角元素包围桌子是行不通的，因为桌子的方角“渗透进来”。

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

在将cellspacing设置为零后，底部td角仍然是正方形。

这些表是用PHP生成的，所以我可以对每个外部th/tds应用不同的类，并分别设置每个角的样式。我宁愿不这样做，因为它不是很优雅，而且应用于多个表有点痛苦，所以请继续提出建议。

我希望不使用JavaScript。

当前回答

我尝试使用伪元素: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)让我知道这是否适用于其他浏览器。

2011-08-25 01:43:02

其他回答

我刚刚为这写了一套疯狂的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 !*/
2014-03-14 21:43:47

你有没有试过使用表{border-spacing: 0}而不是表{border-collapse: collapse} ??

2010-10-18 04:16:58

据我所知，你能做到的唯一方法是修改所有的单元格，就像这样:

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设置为0(或等价地:td, th {margin:0;})灰色的“边界”将消失。

编辑2:

只有一张桌子，我不知道该怎么做。如果将标题行更改为嵌套表，可能会得到想要的效果，但这需要更多的工作，而且不是动态的。

2009-03-09 22:54:11

给出的答案只有在没有国界的情况下才有效，这是非常有限的!

我在SASS中有一个宏来做这件事，它完全支持外部和内部边界，实现了与border-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样式。

希望这能有所帮助。

2011-07-15 10:44:33

下面是一个来自http://medialoot.com/preview/css-ui-kit/demo.html的关于如何实现圆角表的最新示例。它基于Joel Potter上面建议的特殊选择器。正如你所看到的，它还包括一些让IE有点开心的魔法。它包括一些额外的样式来交替行的颜色:

table-wrapper {
  width: 460px;
  background: #E0E0E0;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
  background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
  background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
  padding: 8px;
  -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -webkit-border-radius: 10px;
  /*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.table-wrapper table {
  width: 460px;
}
.table-header {
  height: 35px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  text-decoration: none;
  font-weight: bold;
}
.table-row td {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  font-weight: normal;
  color: #858585;
  padding: 10px;
  border-left: 1px solid #ccc;
  -khtml-box-shadow: 0px 1px 0px #B2B3B5;
  -webkit-box-shadow: 0px 1px 0px #B2B3B5;
  -moz-box-shadow: 0px 1px 0px #ddd;
  -o-box-shadow: 0px 1px 0px #B2B3B5;
  box-shadow: 0px 1px 0px #B2B3B5;
}
tr th {
  border-left: 1px solid #ccc;
}
tr th:first-child {
 -khtml-border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -o-border-top-left-radius: 8px;
  /*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-left-radius: 8px;
  border: none;
}
tr td:first-child {
  border: none;
}
tr th:last-child {
  -khtml-border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -o-border-top-right-radius: 8px;
  /*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-right-radius: 8px;
}
tr {
  background: #fff;
}
tr:nth-child(odd) {
  background: #F3F3F3;
}
tr:nth-child(even) {
  background: #fff;
}
tr:last-child td:first-child {
  -khtml-border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -o-border-bottom-left-radius: 8px;
  /*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
  -khtml-border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -o-border-bottom-right-radius: 8px;
  /*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-right-radius: 8px;
}
2011-09-22 02:07:50

推荐文章

aliyun

最新文章

标签

2024 code 京ICP备15047053号-1