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

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

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

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

我能够使用一系列：last-child和：first-child选择器解决这个问题,将半径应用于角上的各个tds,例如

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

This version does what I want(至少,火狐下),但也觉得非常详细和哈克,一个问题,当我添加前缀版本兼容性(-moz-,-webkit-等),那将只会变得更糟,并为&LT支持;日/ >除了< td />之外的元素.是否有一种简洁,纯粹的CSS方式来获得这种行为？

解决方法

假设您已折叠表格中的边框,只需在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;
}

原文地址：https://www.jb51.cc/css/217862.html