边界-半径属性和边界-崩溃:崩溃不能混合。我如何使用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。

当前回答

实际上，您可以在div中添加表作为其包装器。然后将这些CSS代码分配给包装器:

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

table {
  border-collapse: collapse;
}

2017-10-24 11:45:08

其他回答

下面是一个使用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;
  }
}

2018-08-23 10:32:28

实际上，您可以在div中添加表作为其包装器。然后将这些CSS代码分配给包装器:

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

table {
  border-collapse: collapse;
}

2017-10-24 11:45:08

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

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

2012-05-30 22:00:54

使用"overflow: hidden"和"border-radius" 这也适用于“折叠”表

例子:

border - radius: 1 em; 溢出:隐藏;

2022-02-12 05:16:00

在遇到同样的问题后找到了这个答案，但发现它非常简单:只需给表overflow:hidden

不需要包装元素。当然，我不知道7年前这个问题最初被问到的时候，这是否有用，但现在有用了。

2016-09-27 17:23:10

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

推荐文章

最新文章

标签