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

Put the list aside for a moment, because now you start writing the CSS to get things rolling.
First, make sure the map will show up:
table, table * { margin : 0 ; padding : 0 ; font : 1em/1 sans-serif ;}
table { display : block ; width : 1000px ; height : 700px ;
background : url(us-state-map.gif) no-repeat ;}
Okay, the map's in place, but the data is all on the let side, not stretched out (see Figure 6-10).
Interesting, no? It's because the table cells are all hanging together in the manner of a table,
but the table element itself is no longer acting as a table usually does. It's now generating a
block box, just like any div would do. h us, the layout association between the table
element and the rows and cells and everything else has been broken. Yes, really.
You need to get all bits of data into place. h e i rst step is to get them all to generate block
boxes and then position them all. (In theory, positioning them forces them to generate block
boxes, but I like to explicitly declare changes of display just to be sure.) You also should add
in a temporary border so you can see where things go (see Figure 6-11).
tr , th , td { display : block ;}
tr { position : absolute ; top : 0 ; left : 0 ;
color : #527435 ;
border : 1px dotted red ;}
217
Figure 6-10: The map and the data.