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

< tbody>
< tr>
< td>Row 1 cell 1</ td>
< td>Row 1 cell 2</ td>
< td>Row 1 cell 3</ td>
< td>Row 1 cell 4</ td>
< td>Row 1 cell 5</ td>
</ tr>
< tr>
< td>Row 2 cell 1</ td>
< td>Row 2 cell 2</ td>
< td>Row 2 cell 3</ td>
< td>Row 2 cell 4</ td>
< td>Row 1 cell 5</ td>
</ tr>
</ tbody>
</ table>
h is sets up three columns, one of which “spans” two cells per row and two of which encircle
one cell per row. h at adds up to four cells per row, and you can see that each row has i ve
cells. h at means that the last cell in each row is not part of a structural column.
Okay, i ne, but what about styling the columns you do have (see Figure 6-5)? h at would seem
to be straightforward enough: Just apply CSS to the col elements.
211
col { background : red ; width : 10em ;}
And that very limited example works i ne in just about any browser available today. If your
goal with columns is simply background colors and setting the column widths, then you're
golden.
If you want to do just about anything else to style the columns, though, you're basically out of
luck. h at's because the CSS specii cation allows only two more properties on table columns,
border and visibility , and neither is well supported.
In the former case, if you declare a border, browsers will not draw it the same way. Some
browsers will draw your border around the whole column, whereas others will cause it to be
applied to the column and all of the cells inside the column. h is has relatively decent results
when you just set a solid one-pixel border, but it breaks down with anything thicker or less
solid. It also requires that you declare table {border-collapse: collapse;} to
work at all, which would be more worth knowing if the results were more consistent.
In the latter case, all you can do is set visibility: collapse in order to hide whole
columns. h at's great, except it doesn't work in all browsers, most notably Safari and Chrome
and their mobile cousins.