我想在< 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-等),那将只会变得更糟,并为<支持;日/ >除了< td />之外的元素.是否有一种简洁,纯粹的CSS方式来获得这种行为？
解决方法
假设您已折叠表格中的边框,只需在tbody上设置display：block并应用border-radius.
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;
}
