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

其他回答

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

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

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

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

2010-11-26 23:37:41

这里有一个方法:

div { 边框:2px纯红色; 溢出:隐藏; border - radius: 14 px; 变换:旋转(0度); ｝表{ border-spacing: 0; 背景颜色:蓝色; 高度:100%; 宽度:100%; ｝ < div > <表> < tr > < td > < br > < / td > < / tr > 表> < / < / div >

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

2020-02-14 10:17:52

简单的方法…

table {
 border-collapse: inherit;
 border: 1px solid black;
 border-radius: 5px;
}

2020-07-30 06:20:10

我是新的HTML和CSS，我也在寻找这个解决方案，在这里我发现了什么。

table,th,td {
   border: 1px solid black;
   border-spacing: 0
}
/* add border-radius to table only*/
table {
   border-radius: 25px    
}
/* then add border-radius to top left border of left heading cell */
th:first-child {
   border-radius: 25px 0 0 0
}
/* then add border-radius to top right border of right heading cell */
th:last-child {
   border-radius: 0 25px 0 0
}
/* then add border-radius to bottom left border of left cell of last row */
tr:last-child td:first-child {
   border-radius: 0 0 0 25px
}
/* then add border-radius to bottom right border of right cell of last row */
tr:last-child td:last-child {
   border-radius: 0 0 25px 0
}

我试了一下，猜猜效果如何:)

2015-02-08 21:59:09

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

推荐文章

最新文章

标签