Graphics Programs Reference
In-Depth Information
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
< 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 ;}
Search WWH ::

Custom Search