Formateo de Tablas con Scroll y fileteado de filas

Para poder dar un aspecto con scroll y fileteado a nuestras tablas tendremos que hacer lo siguiente:

• Parte CSS:
  

<br />/* begin some basic styling here */<br />table, td, select {<br />background-color: #FFFFFF;<br />font-family: arial, verdana, ms sans serif;<br />font-size: 10pt;<br />}<br />/*tr {<br />border-top: 1px solid; <br />border-top-color: #F1F1F1; <br />border-right: 1px solid; <br />border-left: none; <br />border-right-color: Gray; <br />}<br />*/<br />th { <br />background: #FFE3E3;<br />}<br />/* end basic styling */<br />/* define height and width of scrollable area. Add 16px to width for scrollbar */<br />/* allow WinIE to scale 100% width of browser by not defining a width */<br />/* WARNING: applying a background here may cause problems with scrolling in WinIE 5.x */<br />div.tableContainer {<br />clear: both;<br />height: 255px;<br />overflow: auto;<br />width: 900px;<br />}<br />/* WinIE 6.x needs to re-account for it's scrollbar. Give it some padding */<br />html>div.tableContainer {<br />padding: 0 16px 0 0;<br />width: 884px;}<br />/* clean up for allowing display Opera 5.x/6.x and MacIE 5.x */<br />html>body div.tableContainer {<br />height: auto;<br />padding: 0;<br />}<br /><br />/* Reset overflow value to hidden for all non-IE browsers. */<br />/* Filter out Opera 5.x/6.x and MacIE 5.x */<br />head:first-child+body div[class].tableContainer {<br />height: 255px;<br />overflow: hidden;<br />width: 900px<br />}<br />/* define width of table. IE browsers only */<br />/* if width is set to 100%, you can remove the width */<br />/* property from div.tableContainer and have the div scale */<br />div.tableContainer table {<br />float: left;<br />width: 100%;<br />}<br />/* WinIE 6.x needs to re-account for padding. Give it a negative margin */<br />html>div.tableContainer table {<br />margin: 0 -16px 0 0<br />}<br />/* define width of table. Opera 5.x/6.x and MacIE 5.x */<br />html>body div.tableContainer table {<br />float: none;<br />margin: 0;<br />width: 886px;<br />}<br />/* define width of table. Add 16px to width for scrollbar. */<br />/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */<br />head:first-child+body div[class].tableContainer table {<br />width: 900px;<br />}<br />/* set table header to a fixed position. WinIE 6.x only */<br />/* In WinIE 6.x, any element with a position property set to relative and is a child of */<br />/* an element that has an overflow property set, the relative value translates into fixed. */<br />/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */<br />thead.fixedHeader tr {<br />position: relative;<br />/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */<br />top: expression(document.getElementById("tableContainer").scrollTop);<br />}<br />/* set THEAD element to have block level attributes. All other non-IE browsers */<br />/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */<br />/* Filter out Opera 5.x/6.x and MacIE 5.x */<br />head:first-child+body thead[class].fixedHeader tr {<br /> display: block;<br />}<br />/* make the TH elements pretty */<br />thead.fixedHeader th {<br />background: #FFE3E3;<br />}<br />/* make the A elements pretty. makes for nice clickable headers */<br />/*thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited { */<br />/* color: #FFF; */<br />/* display: block; */<br />/* text-decoration: none; */<br />/* width: 100% */<br />/*} */<br />/* make the A elements pretty. makes for nice clickable headers */<br />/* WARNING: swapping the background on hover may cause problems in WinIE 6.x */<br />/*thead.fixedHeader a:hover { */<br />/* color: #FFF; */ <br />/* display: block; */<br />/* text-decoration: underline; */<br />/* width: 100% */<br />/*} */<br />/* define the table content to be scrollable */<br />/* set TBODY element to have block level attributes. All other non-IE browsers */<br />/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */<br />/* induced side effect is that child TDs no longer accept width: auto */<br />/* Filter out Opera 5.x/6.x and MacIE 5.x */<br />head:first-child+body tbody[class].scrollContent {<br /> display: block;<br />height: 232px;<br />overflow: auto;<br />width: 100%<br />}<br />/* make TD elements pretty. Provide alternating classes for striping the table */<br />/* http://www.alistapart.com/articles/zebratables/ */<br />tbody.scrollContent td, tbody.scrollContent tr.normalRow td {<br />background: #FFF;<br />}<br />tbody.scrollContent tr.alternateRow td {<br />background: #EEE; <br />}<br />

• Parte Javascript:
  

/* http://www.alistapart.com/articles/zebratables/ */<br />function removeClassName (elem, className) {<br /> elem.className = elem.className.replace(className, "").trim();<br />}<br /><br />function addCSSClass (elem, className) {<br /> removeClassName (elem, className);<br /> elem.className = (elem.className + " " + className).trim();<br />}<br /><br />String.prototype.trim = function() {<br /> return this.replace( /^\s+|\s+$/, "" );<br />}<br /><br />function stripedTable() {<br /> if (document.getElementById && document.getElementsByTagName) { <br /> var allTables = document.getElementsByTagName('table');<br /> if (!allTables) { return; }<br /><br /> for (var i = 0; i < trs =" allTables[i].getElementsByTagName(" j =" 0;" k =" 0;" thiscontainer =" document.getElementById('tableContainer');" onclickaction =" 'toggleSelectBoxes();';" onscroll =" new" thiscontainer =" document.getElementById('tableContainer');" thisheader =" document.getElementById('fixedHeader');" selectboxes =" thisContainer.getElementsByTagName('select');" i =" 0;">= eval(selectBoxes[i].parentNode.offsetTop - thisHeader.offsetHeight)) {<br /> selectBoxes[i].style.visibility = 'hidden';<br /> } else {<br /> selectBoxes[i].style.visibility = 'visible';<br /> }<br /> }<br />} <br /><br />window.onload = function() { stripedTable(); addIEonScroll(); }