css - 有没有一种干净的方法可以在纯 CSS 中获取 <tbody/> 的边框？

Question

我想在 <tbody/> 上设置背景和圆 Angular 边框, 比如

tbody { border-radius: 15px; border: 1px solid black; background: #ccf; }

但是，当我在 Codepen 中尝试这个时, 边框和背景颜色显示，但是<tbody/>仍然有方 Angular 。

我可以使用一系列 :last-child 来解决这个问题和 :first-child选择器将半径应用于个人 td s 在 Angular 落里，例如

tbody tr:first-child td:first-child { border-top-left-radius: 15px; }

This version does what I want (至少，在 firefox 下)但也感觉非常冗长和 hacky，当我添加前缀版本以实现兼容性( -moz- ， -webkit- 等)并支持 <th/> 时，这个问题只会变得更糟除 <td/> 之外的元素.是否有一种简洁、纯 css 的方式来获得这种行为？

Answer 1

假设您折叠了表格中的边框，只需在 tbody 上设置 display:block 并应用 border-radius。

Codepen example

CSS

table {
    width: 100%;
    border-collapse: collapse;
    display: block;
    width: 600px;
}

tbody {
    background: #ccf;
    border: 1px solid black;
    border-radius: 15px;
    display: block;
}

th, td {
    width: 200px;
}

td, th {
    padding: 5px;
    text-align: center;
}