/* Terence Ordona, portal[AT]imaputz[DOT]com */ /* http://creativecommons.org/licenses/by-sa/2.0/ */ /*adapted by St. John's Web Group from the above original css at http://www.imaputz.com/cssStuff/bigFourVersion.html*/ /*please follow same license and attribution rules as outlined in creativecommons link above */ /* In addition to referencing this css, you need the following to make this work: 1) doc type and tag need to have: 2) tableContainer Div should have height and width styles 3) tag should have width style 4) tag should have height style on it (only gets used by non-IE) Further Notes: a) The width on div and table should be the same b) the widths of the th's and their corresponding td's should be the same, EXCEPT for the last one, where the td should be 16px less than the th (to accommodate scrollbar, in FireFox) c) The height on the tbody should be the height of the tablecontainer minus the height of the header row - about 23x (it determines when table content should start scrolling) Example:

and first	row should have width tags on them 5)

Header 1	Header 2	Header 3
Cell Content 1	Cell Content 2	Cell Content 3
More Cell Content 1	More Cell Content 2	More Cell Content 3

*/ /*BEGIN CSS DEFINITION*/ /* define basics of scrollable area. */ div.table-container { clear: both; border: 1px solid rgb(153,0,0); overflow: auto; } /* Reset overflow value to hidden for all non-IE browsers. */ html>body div.table-container { overflow: hidden; } /* define basics of table. IE browsers only */ div.table-container table { float: left; } /* set table header to a fixed position. WinIE 6.x only */ /* In WinIE 6.x, any element with a position property set to relative and is a child of */ /* an element that has an overflow property set, the relative value translates into fixed. */ /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */ thead.fixed-header tr { position: relative } /* set THEAD element to have block level attributes. All other non-IE browsers */ /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */ /* html>body thead.fixed-header tr { display: block } */ /* make the TH elements pretty */ thead.fixed-header th { background: rgb(153,0,0); color: white; font-weight: bold; font-family: arial; font-size: 120%; padding: 4px 3px; text-align: left; } /* make the A elements pretty. makes for nice clickable headers */ thead.fixed-header a, thead.fixed-header a:link, thead.fixed-header a:visited { color: #FFF; display: block; text-decoration: none; width: 100% } /* make the A elements pretty. makes for nice clickable headers */ /* WARNING: swapping the background on hover may cause problems in WinIE 6.x */ thead.fixed-header a:hover { color: #FFF; display: block; text-decoration: underline; width: 100% } /* define the table content to be scrollable */ /* set TBODY element to have block level attributes. All other non-IE browsers */ /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */ /* induced side effect is that child TDs no longer accept width: auto */ /*NOTE: height here not used by IE, but must be present - and set appropriately - for non-IE*/ /* html>body tbody.scroll-content { display: block; overflow: auto; width: 100% } */ /* make TD elements pretty. Provide alternating classes for striping the table */ /* http://www.alistapart.com/articles/zebratables/ */ tbody.scroll-content td, tbody.scroll-content tr.normal-row td { background: #FFF; border-top: none; border-left: none; border-right: 1px solid #CCC; border-bottom: 1px solid #DDD; padding: 2px 3px 3px 4px; font-family: arial; font-size: 120%; text-align: left; } tbody.scroll-content tr.alternate-row td { background: #EEE; border-top: none; border-left: none; border-right: 1px solid #CCC; border-bottom: 1px solid #DDD; padding: 2px 3px 3px 4px; font-family: arial; font-size: 120%; text-align: left; }