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: 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?

Don't tags need to be closed? – Diodeus - James MacFarlane Dec 10 '13 at 20:33 — Diodeus - James MacFarlane, Dec 10 '13 at 20:33

score 1 · Accepted Answer · edited May 23 '17 at 12:21

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

edited May 23 '17 at 12:21

Community

1
1

answered Dec 04 '13 at 16:37

Diodeus - James MacFarlane

112,730
33
157
176

Good info on :after via CSS, but classes don't work with . – TruMan1 Dec 10 '13 at 20:28
I guess you can play Absolute Positioning Hell with the . Oh well.
– Diodeus - James MacFarlane Dec 10 '13 at 20:42
I ended up creating a thead on the fly based on the col spans. Something like this: $('colgroup col').each(function () { console.log(this); }); – TruMan1 Dec 16 '13 at 21:19

Add labels to the top of colgroups?

1 Answers1