Add labels to the top of colgroups?

Question

I have my colgroups generated dynamically and they style each group with a background color. Is there a way to add a label on top of each group?

My colgroup looks like this:

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

And here is how it renders:

How do I put labels on top of each group? I can't select them to make that kind of change so maybe there is a jQuery API or even plugin for it?

Answer 1

You can use the CSS :after (or :before) pseudo class.

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

CSS:

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

}

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

You can also combine this with UTF-8 characters for any glyph you may want to use for your sort indicator.

See: Use Font Awesome Icons in CSS