表格边框半径 - 全局 css（thead 或 tbody 选择器）答案

【问题标题】：Table border radius - global css (thead OR tbody selector)表格边框半径 - 全局 css（thead 或 tbody 选择器）
【发布时间】：2013-10-18 16:31:04
【问题描述】：

我为一个大网站重写了一些 CSS。内容很多，而且内容经常不同。

我不知何故被困在 css 表上。

我的新表格应该有圆形边框。谢天谢地，我只能使用 CSS（它可以优雅地降级到 IE7），所以我将只使用 CSS。

现场餐桌不同。有些有表头，有些没有。

众所周知，border-radius 不适用于桌子本身。它必须是表格单元格参数。

是否有可能编写 CSS，所以浏览器会识别表格是否有 thead（然后为“table thead tr:first-child th:first-child”设置边框半径），如果没有边框-radius 将设置为“table tbody tr:first-child td:first-child”)？

我试过的快速简单的镜头不起作用 - “table tr:first-child td:first-child” - 如果我想的话，我应该假设 - 它为“thead th”和“tbody td”。

如果您有任何可能的解决方案，我将不胜感激。仅 CSS3 的解决方案对我来说已经足够了。

【问题讨论】：

“众所周知，border-radius 不适用于桌子本身”是什么意思？ it works
此外，您不应在表格内部元素上使用border-radius。 w3.org/TR/css3-background/#the-border-radius - 见5.6. Effect on Tables
@Peter：好吧，我没有提到，现场所有的桌子都是边框折叠的。抱歉误导。
what about this?
顺便说一句。你可以使用border-spacing 而不是border-collapse 例如：jsfiddle.net/fhBuS/4

标签： html css frontend

【解决方案1】：

您可以使用 jQuery 来计算 th 标签，如果找到的话，可以在表上设置一个类...

var thCount = $("#theTable tr th").length;

   if (thCount > 0){
     $("#theTable").addClass("roundCorners"); 
     //adds a class to the table so you can make round corners
   }

这个例子假设你已经有某种形式的 ID/Class，只需要根据需要进行更改并使用你的 CSS。

【讨论】：