javascript - 将标签添加到 colgroups 的顶部？

Question

我让我的 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 甚至是它的插件？

Answer 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 字符组合用于您可能希望用于排序指示符的任何字形。

请参阅：在 CSS 中使用 Font Awesome 图标