Search code examples
javascriptjqueryhtmljquery-pluginscolgroup

Add labels to the top of colgroups?

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: enter image description here

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?

Solution

  • 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