TABLES - CSS: Professional Techniques for Modern Layout - page 211

Figure 6-6: Using classes to style “columns.”

Remember: When styling col elements, that simple change of style is impossible in non-IE
browsers, because the CSS specii cation forbids it.

If you want to put a border around a specii c column using this markup approach (see Figure
6-7), it takes a little bit of work. All you have to do is i ll in the side borders for all the cells in
the column, then drop top and bottom borders on the top and bottom cells in the column.

td.c2 { border : 2px solid #000 ; border-width : 0 2px ;}
tr:first-child td.c2 { border-top-width : 2px ;}
tr:last-child td.c2 { border-bottom-width : 2px ;}

Figure 6-7: Using a combination of approaches to border a “column.”

If you're uncomfortable using those selectors for backwards-compatibility reasons, then you
can employ a bit more class trickery. Just class the i rst and last rows in your table
appropriately.

213

< table>
< tbody>
< tr class="first">
…
</ tr>
< tr class="last">
…
</ tr>
</ tbody>
</ table>

With those in place, you need only alter the CSS a little bit to use the new hooks.

td.c2 { border : 2px solid #000 ; border-width : 0 2px ;}
tr.first td.c2 { border-top-width : 2px ;}
tr.last td.c2 { border-bottom-width : 2px ;}