Tabla con scroll HTML+CSS

Escrito por J.F. el Jueves, 9 de Agosto del 2007 a las 14:27

Vamos a ver como podemos realizar una tabla con scroll, que puede resultarnos muy útil a la hora de mostrar una tabla con muchas celdas. Consiste en una tabla en las que las columnas de cabecera se quedan fijas, por lo que al hacer scroll hacia abajo siempre las veremos, y lo que bajarán serán las celdas de resultados. Ésta técnica realizada mediante CSS, con montones de hacks para que funcione en la gran mayoría de navegadores, no la he implementado yo, si no que la ví en una página web llamada Imaputz. Por ello los créditos son del autor de dicha página, y yo simplemente me limito a compartirlo, ya que me parece muy interesante y útil. Aunque es un poco largo, aquí está el código CSS:

TEXTO PLANO

CSS:

1. <style type="text/css">
2. <!--
3. /* Terence Ordona, portal[AT]imaputz[DOT]com         */
4. /* http://creativecommons.org/licenses/by-sa/2.0/    */
5.  
6. /* begin some basic styling here                     */
7. body {
8.     background: #FFF;
9.     color: #000;
10.     font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
11.     margin: 10px;
12.     padding: 0
13. }
14.  
15. table, td, a {
16.     color: #000;
17.     font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
18. }
19.  
20. h1 {
21.     font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
22.     margin: 0 0 5px 0
23. }
24.  
25. h2 {
26.     font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
27.     margin: 0 0 5px 0
28. }
29.  
30. h3 {
31.     font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
32.     color: #008000;
33.     margin: 0 0 15px 0
34. }
35. /* end basic styling                                 */
36.  
37. /* define height and width of scrollable area. Add 16px to width for scrollbar          */
38. div.tableContainer {
39.     clear: both;
40.     border: 1px solid #963;
41.     height: 285px;
42.     overflow: auto;
43.     width: 756px
44. }
45.  
46. /* Reset overflow value to hidden for all non-IE browsers. */
47. html>body div.tableContainer {
48.     overflow: hidden;
49.     width: 756px
50. }
51.  
52. /* define width of table. IE browsers only                 */
53. div.tableContainer table {
54.     float: left;
55.     width: 740px
56. }
57.  
58. /* define width of table. Add 16px to width for scrollbar.           */
59. /* All other non-IE browsers.                                        */
60. html>body div.tableContainer table {
61.     width: 756px
62. }
63.  
64. /* set table header to a fixed position. WinIE 6.x only                                       */
65. /* In WinIE 6.x, any element with a position property set to relative and is a child of       */
66. /* an element that has an overflow property set, the relative value translates into fixed.    */
67. /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
68. thead.fixedHeader tr {
69.     position: relative
70. }
71.  
72. /* set THEAD element to have block level attributes. All other non-IE browsers            */
73. /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
74. html>body thead.fixedHeader tr {
75.     display: block
76. }
77.  
78. /* make the TH elements pretty */
79. thead.fixedHeader th {
80.     background: #C96;
81.     border-left: 1px solid #EB8;
82.     border-right: 1px solid #B74;
83.     border-top: 1px solid #EB8;
84.     font-weight: normal;
85.     padding: 4px 3px;
86.     text-align: left
87. }
88.  
89. /* make the A elements pretty. makes for nice clickable headers                */
90. thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
91.     color: #FFF;
92.     display: block;
93.     text-decoration: none;
94.     width: 100%
95. }
96.  
97. /* make the A elements pretty. makes for nice clickable headers                */
98. /* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
99. thead.fixedHeader a:hover {
100.     color: #FFF;
101.     display: block;
102.     text-decoration: underline;
103.     width: 100%
104. }
105.  
106. /* define the table content to be scrollable                                              */
107. /* set TBODY element to have block level attributes. All other non-IE browsers            */
108. /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
109. /* induced side effect is that child TDs no longer accept width: auto                     */
110. html>body tbody.scrollContent {
111.     display: block;
112.     height: 262px;
113.     overflow: auto;
114.     width: 100%
115. }
116.  
117. /* make TD elements pretty. Provide alternating classes for striping the table */
118. /* http://www.alistapart.com/articles/zebratables/                             */
119. tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
120.     background: #FFF;
121.     border-bottom: none;
122.     border-left: none;
123.     border-right: 1px solid #CCC;
124.     border-top: 1px solid #DDD;
125.     padding: 2px 3px 3px 4px
126. }
127.  
128. tbody.scrollContent tr.alternateRow td {
129.     background: #EEE;
130.     border-bottom: none;
131.     border-left: none;
132.     border-right: 1px solid #CCC;
133.     border-top: 1px solid #DDD;
134.     padding: 2px 3px 3px 4px
135. }
136.  
137. /* define width of TH elements: 1st, 2nd, and 3rd respectively.          */
138. /* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
139. /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
140. html>body thead.fixedHeader th {
141.     width: 200px
142. }
143.  
144. html>body thead.fixedHeader th + th {
145.     width: 240px
146. }
147.  
148. html>body thead.fixedHeader th + th + th {
149.     width: 316px
150. }
151.  
152. /* define width of TD elements: 1st, 2nd, and 3rd respectively.          */
153. /* All other non-IE browsers.                                            */
154. /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
155. html>body tbody.scrollContent td {
156.     width: 200px
157. }
158.  
159. html>body tbody.scrollContent td + td {
160.     width: 240px
161. }
162.  
163. html>body tbody.scrollContent td + td + td {
164.     width: 300px
165. }
166. -->
167. </style>

Y finalmente el código HTML:

TEXTO PLANO

HTML:

1. <div id="tableContainer" class="tableContainer">
2. <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
3. <thead class="fixedHeader">
4.     <tr>
5.         <th><a href="#">Header 1</a></th>
6.         <th><a href="#">Header 2</a></th>
7.         <th><a href="#">Header 3</a></th>
8.     </tr>
9. </thead>
10. <tbody class="scrollContent">
11.     <tr>
12.         <td>Cell Content 1</td>
13.         <td>Cell Content 2</td>
14.         <td>Cell Content 3</td>
15.     </tr>
16.     <tr>
17.         <td>More Cell Content 1</td>
18.         <td>More Cell Content 2</td>
19.         <td>More Cell Content 3</td>
20.     </tr>
21.     <tr>
22.         <td>Even More Cell Content 1</td>
23.         <td>Even More Cell Content 2</td>
24.         <td>Even More Cell Content 3</td>
25.     </tr>
26.     <tr>
27.         <td>And Repeat 1</td>
28.         <td>And Repeat 2</td>
29.         <td>And Repeat 3</td>
30.     </tr>
31.     ...
32.     ...
33.     ...
34.     ...
35. </tbody>
36. </table>
37. </div>

Podemos añadir todas las filas que deseemos. Puedes modificar y adaptar la tabla a tu gusto, ya que según comenta el autor eres libre de hacerlo siempre y cuando no sea con fines comerciales.

Categoria: CSS

• Añadir este post a
• Del.icio.us -
• Meneame -
• Digg -
• Webeame

Entradas relacionadas

Deja un comentario

Nombre (obligado)

E-mail (no sera publicado) (obligado)

Pagina web

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>