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

当前回答

我总是这样用Sass

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}

2017-08-11 13:34:29

其他回答

table { width: 200px; text-align: center; border-radius: 12px; overflow: hidden; } table td { border-width: 1px 0 0 1px; } table tr:first-child td { border-top: none; } table tr td:first-child { border-left: none; } div { background-color: lime; } <table cellspacing="0" cellpadding="0" border="1"> <tr> <td><div>1</div></td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </table>

2021-06-06 12:47:38

下面的方法(在Chrome中测试)通过使用一个扩展为1px的盒子阴影而不是“真实”边界。

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; } <table> <thead> <tr> <th>Foo</th> <th>Bar</th> </tr> </thead> <tbody> <tr> <td>Baz</td> <td>Qux</td> </tr> <tr> <td>Life is short</td> <td rowspan="3">and</td> </tr> <tr> <td>Love</td> </tr> <tr> <td>is always over</td> </tr> <tr> <td>In the</td> <td>Morning</td> </tr> </tbody> </table>

2010-04-06 17:09:18

我想明白了。你只需要使用一些特殊的选择器。

圆角的问题是，td元素并没有变成圆角。你可以这样解决这个问题:

表tr:最后一个孩子td:第一个孩子{ 边框:2px纯橙色; border-bottom-left-radius: 10 px; ｝表tr:最后一个子td:最后一个子{ 边框:2px纯绿色; border-bottom-right-radius: 10 px; ｝ <表> tbody > < < tr > < td > 1道明> < / 2 < td > < / td > < / tr > < tr > < td > 3 < / td > 4 < td > < / td > < / tr > tbody > < / 表> < /

现在所有东西都四舍五入了，除了边界崩溃的问题:崩溃破坏了所有东西。

一个解决方法是添加border-spacing: 0，并在表中保留默认的border-collapse: separate。

2009-03-11 18:53:29

我总是这样用Sass

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}

2017-08-11 13:34:29

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

我在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

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

推荐文章

最新文章

标签