border-radius 属性和 border-collapse:collapse 不能混合。如何使用边框半径创建带有圆角的折叠表格？

发布于 2024-07-14 23:10:13 字数 798 浏览 10 评论 0原文

我正在尝试使用 CSS border-radius 属性制作一个带有圆角的表格。我正在使用的表格样式看起来像这样：

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

这就是问题所在。我还想设置 border-collapse:collapse 属性，设置后 border-radius 不再起作用。有没有一种基于 CSS 的方法可以在不实际使用的情况下获得与 border-collapse:collapse 相同的效果？

看来问题很大一部分在于将表格设置为圆角并不会影响角 td 元素的边角。如果表格都是一种颜色，这不会成为问题，因为我可以分别将第一行和最后一行的顶部和底部 td 角设置为圆角。但是，我对表格使用不同的背景颜色来区分标题和条纹，因此内部的 td 元素也会显示其圆角。

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

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

将单元格间距设置为零后，底 td 角仍为方形。

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

我想在不使用 JavaScript 的情况下完成此操作。

原文

I am trying to make a table with rounded corners using the CSS border-radius property. The table styles I'm using look something like this:

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

Here's the problem. I also want to set the border-collapse:collapse property, and when that is set border-radius no longer works. Is there a CSS-based way I can get the same effect as border-collapse:collapse without actually using it?

It seems that a large part of the problem is that setting the table to have rounded corners does not affect the corners of the corner td elements. If the table was all one color, this wouldn't be a problem since I could just make the top and bottom td corners rounded for the first and last row respectively. However, I am using different background colors for the table to differentiate the headings and for striping, so the inner td elements would show their rounded corners as well.

Surrounding the table with another element with round corners doesn't work because the table's square corners "bleed through."

Specifying border width to 0 doesn't collapse the table.

Bottom td corners still square after setting cellspacing to zero.

The tables are generated in PHP, so I could just apply a different class to each of the outer th/tds and style each corner separately. I'd rather not do this, since it's not very elegant and a bit of a pain to apply to multiple tables, so please keep suggestions coming.

I'd like to do this without JavaScript.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寄与心 2024-07-21 23:10:13

我想到了。您只需要使用一些特殊的选择器即可。

圆化表格角的问题是 td 元素也没有变成圆角。您可以通过执行以下操作来解决该问题：

table tr:last-child td:first-child {
    border: 2px solid orange;
    border-bottom-left-radius: 10px;
}
    
table tr:last-child td:last-child {
    border: 2px solid green;
    border-bottom-right-radius: 10px;
}

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

现在一切都正常了，除了仍然存在 border-collapse:collapse 破坏一切的问题。

解决方法是添加border-spacing: 0并在表格上保留默认的 border-collapse:separate。

I figured it out. You just have to use some special selectors.

The problem with rounding the corners of the table was that the td elements didn't also become rounded. You can solve that by doing something like this:

table tr:last-child td:first-child {
    border: 2px solid orange;
    border-bottom-left-radius: 10px;
}
    
table tr:last-child td:last-child {
    border: 2px solid green;
    border-bottom-right-radius: 10px;
}

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

Now everything rounds properly, except that there's still the issue of border-collapse: collapse breaking everything.

A workaround is to add border-spacing: 0 and leave the default border-collapse: separate on the table.

border-radius 属性和 border-collapse:collapse 不能混合。 如何使用边框半径创建带有圆角的折叠表格？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（29）

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

border-radius 属性和 border-collapse:collapse 不能混合。如何使用边框半径创建带有圆角的折叠表格？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。