Listing 29.19 shows the CSS code you use to style the tables view defined in the sections above so that you can see why things look and act as they do. Figure 29.4 shows the rendered tables view with the CSS styling applied.
01 #tableContainer{ display: inline-block;
02 max-height:270px; overflow-y:auto; }
03 #sortOptions{ display:inline-block; }
04 .pageButton,
05 .findButton { padding:3px; width:100px; height:50px;
06 border:2px ridge blue; border-radius: 5px;
07 background-color: blue; color: white;
08 font-weight: bold; cursor: pointer; }
09 .pageButton { width: 60px; height:50px; height:30px; }
10 .tableLabel { display: inline-block; width:150px;
11 text-align:right; margin-right:10px;
12 font: 16px/20px Helvetica, sans-serif; }
13 .tableInput { padding:3px; border:2px ridge blue;
14 border-radius: 5px; width: 150px}
15 table { border:1px solid black; background-color:white;
16 padding:0px; margin-right:20px; }
17 td, th { text-align:center; padding: 6px; border: .1em dotted grey;
18 font: 16px/20px Helvetica, sans-serif; }
19 th {font-weight: bold; }
20 tr {padding:0px; }