我试图使用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。


当前回答

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

其他回答

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

我在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样式。

希望这能有所帮助。

下面是一个使用SCSS的解决方案。它创建了一个圆角和有边框的单元格的表格。

这个解决方案使用了@Ramon Tayag的方法。他指出,关键在于使用border-spacing: 0。

$line: 1px solid #979797;
$radius: 5px;

table {
  border: $line;
  border-radius: $radius;
  border-spacing: 0;

  th,
  tr:not(:last-child) td {
    border-bottom: $line;
  }

  th:not(:last-child),
  td:not(:last-child) {
    border-right: $line;
  }
}

我开始实验“显示”,我发现:边界半径,边界,边距,填充,在一个表中显示:

display: inline-table;

例如

table tbody tr {
  display: inline-table;
  width: 960px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

但是我们需要为每一列设置一个宽度

tr td.first-column {
  width: 100px;
}
tr td.second-column {
  width: 860px;
}

我也有同样的问题。 完全删除border-collapse并使用: 单元格间距= " 0 "单元格边距= " 0 " 在HTML文档中。 例子:

<table class="top_container" align="center" cellspacing="0" cellpadding="0">

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

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:

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