Question

我想在<tbody/>上设置背景和圆角边框，例如

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

但是，当我在Codepen中尝试此操作时，会显示边框和背景颜色，但<tbody/>仍有方角。

我可以使用一系列:last-child和:first-child选择器解决此问题，将半径应用于角上的各个td，例如

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

This version does what I want（至少在firefox下）但也感觉非常冗长和hacky，这个问题只会在我为兼容性添加前缀版本时变得更糟（-moz-，{{1}除了-webkit-之外，还支持<th/>个元素。是否有一种简洁，纯粹的css方式来获得这种行为？

Answer 1

假设您已折叠表格中的边框，只需在display:block上设置tbody并应用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;
}

是否有一种干净的方式来获得纯CSS的边界？

1 个答案: