Styling the Tables View

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.

Listing 29.19 table_styles.css: Implementing the CSS styles for the tables view

Click here to view code image

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; }