How to properly style td headers= attribute?

HTML & CSS
1

Hi. We’re working on a Joomla site that uses a component for displaying upcoming events. The main table for the listing of events uses the ‘headers’ attribute on the td cells to specify which column headers each cell associates with.

This is all fine, but I’m not too familiar with the best way to target these so I can style them uniquely. Unfortunately, the code that is output does not include any other hooks I can get for the table cells - no classes, no formatting for the text (it just sits bare in the td tags), etc.

I would just like to be able to target and style the type in some columns different than others.

Here’s an example of the markup:


<table>
<thead>
<tr>
<th id="col1"></th>
<th id="col2"></th>
</tr>
</thead>
<tbody>
<tr>
<td headers="col1">sample text</td>
<td headers="col2">sample text</td>
</tr>
</tbody>
</table>
2

I’m not sure if that is something you can use to style the element. You could probably roll your own little script - or find a library that has the ability - and do it that way. In fact according to this, the headers attribute is almost exclusively for screen readers.

3

You should be able to use attribute selectors to style it, like this;


td[headers="col1"]
{
  color: red;
}

td[headers="col2"]
{
  color: blue;
}

Worked in IE8, IE7, Firefox, Opera and Chrome (didn’t test IE6 or Safari).

4

Should work in Safari and also in Opera. Will definitely not work in IE6 which doesn’t understand that part of CSS.

5

As Stephen said, IE6 won’t understand it since it doesn’t support attribute selection like that.

Your best bet would be to also apply a class/ID to those headers, and style it regularly like that :slight_smile:

6

Reading the original post, I don’t think he can change the HTML.

Just use CSS attribute selectors and IE6 users will have to make do with less.

7

Great, thanks for the tips! I went ahead and applied the attribute selectors as suggested. Had never used those before, so thanks!

I only did minimal changes with this, though, so IE6 wouldn’t get too messed up. Pretty much just changed the font-size. It turns out that two of the columns also had text that was links. So I could target those separately.

I do have a separate IE6 style sheet as part of my template. But I’m guessing there’s no simple work-arounds to mimic this behavior, is there? I don’t want to do any javascript just to pull this off.

Thanks again!

8

There is no alternative way IE6 can understand for attribute selection unfortunately. IE6 is a dying browser anyway (though support should still be given depending on your usage percentage), so additional aesthetics you try to give good browsers, shouldn’t be worried about with IE6 if they can’t handle it :slight_smile: