有没有一种纯CSS的简洁方法可以为<tbody />添加边框？

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; }

这个版本（至少在Firefox下）实现了我的要求，但感觉非常啰嗦和hacky，当我添加前缀版本（如-moz-、-webkit-等）以及支持<th/>元素时，这个问题只会变得更糟。有没有一种简洁的纯CSS方法来实现这种行为呢？

- Dan

---

我之前也遇到过这个问题，最终得出的工作示例和你一样。在CSS方面，tbody有点奇怪。 - Tim S

Answer 1

假设您已经在表格中折叠了边框，只需在上设置display:block并应用border-radius即可。 Codepen示例 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;
}

- Josh Crozier

---

这似乎将列宽度与 <thead /> 中的列宽度分离。 - Dan

@Dan 你说得没错 - 这是块级元素的特征。你需要设置一个定义好的宽度。http://codepen.io/JoshC/pen/emJah - Josh Crozier

@JoshCrozier 的 Codepen 示例已经失效了。 - Jurosh

@JoshCrozier Codepen的示例已经无法正常工作了。 - undefined