将标签添加到 colgroups 的顶部？

【问题标题】：Add labels to the top of colgroups?将标签添加到 colgroups 的顶部？
【发布时间】：2013-12-04 16:33:30
【问题描述】：

我动态生成了我的 colgroups，并且他们使用背景颜色为每个组设置样式。有没有办法在每个组的顶部添加标签？

我的 colgroup 如下所示：

<colgroup>
  <col>
  <col span="3" style="background-color: #ccc;">
  <col span="3" style="background-color: #ddd;">
  <col span="3" style="background-color: #ccc;">
</colgroup>

这是它的渲染方式：

如何在每个组的顶部放置标签？我无法选择它们来进行这种更改，所以也许有一个 jQuery API 甚至插件？

【问题讨论】：

标签不需要关闭吗？

标签： javascript jquery html jquery-plugins colgroup

【解决方案1】：

您可以使用 CSS :after（或 :before）伪类。

<col span="3" class="index">

CSS：

.index {
    position:relative;
    background-color: #ccc;

}

.index:after {
      position:absolute;          
      content: "Index";
      top:0px;
      left:0px;
      color:#000000
}

您还可以将其与 UTF-8 字符组合，用于您可能希望用作排序指示符的任何字形。

见：Use Font Awesome Icons in CSS

【讨论】：

关于 :after 通过 CSS 的好信息，但类不适用于。
我猜你可以用玩绝对定位地狱。哦，好吧。

我最终根据 col span 动态创建了一个 thead。像这样的东西： $('colgroup col').each(function () { console.log(this); });