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

Now turn thead into the legend for the chart. At er all, the information you need is there
already.
h e i rst step is to “un-position” the tr and th elements in the thead . At the moment,
thanks to the tr, th, td rule, they're absolutely positioned. So override that by explicitly
assigning the default value of static , which basically means “not positioned.”
thead * { position : static ; padding : 0.25em ;}
Alternatively, you could adjust the tr, th, td rule's selector to read tbody tr, tbody
th, tbody td . h at would remove the need to “un-position” the thead 's descendant,
although you'd then have to write thead * {display: block;} in order to get the cells
to stack up on top of each other.
Either approach would have the same result in this case of this table (see Figure 6-22). So,
having done that (whichever way it's done), position the thead itself.
thead { position : absolute ;
top : 50% ; margin-top : -2.5em ;
left : 100% ; margin-left : 2.5em ;}
229
Figure 6-22: Using the column headers as a graph legend.
And there you go!
A couple of times I promised to talk about scripting some of this process, so do that now.
When it comes to i guring out the upper bound of the graph (260,000 in this particular
example), not to mention calculating the heights of all the bars, it's obvious that a little bit of
programming would go a long way. h at could be accomplished one of two ways.