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

Question

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

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

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

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

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

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

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

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

Answer 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。