Foros del Web » Creando para Internet » HTML »

tbody scroll

Estas en el tema de tbody scroll en el foro de HTML en Foros del Web. Hola, he estando intentando hacer un scroll vertical en el tbody de una tabla pero no consigo que funcione en todos los navegadores, de hecho ...
  #1 (permalink)  
Antiguo 11/10/2010, 06:49
 
Fecha de Ingreso: diciembre-2009
Mensajes: 183
Antigüedad: 8 años
Puntos: 5
tbody scroll

Hola,

he estando intentando hacer un scroll vertical en el tbody de una tabla pero no consigo que funcione en todos los navegadores, de hecho solo he conseguido que funcione en FireFox.

Ejemplo:

Código HTML:
<table>
    <thead>
        <tr>
            <th>
                columna 1
            </th>
            <th>
                columna 2
            </th>
            <th>
                columna 3
            </th>
        </tr>
    </thead>
    <tbody>
            <td>
                columna 1
            </td>
            <td>
                columna 2
            </td>
            <td>
                columna 3
            </td>
    </tbody>
</table> 
A TBODY le pongo una altura determimada con CSS pero no consigo que funcione en todos los navegadores.

Sabe álguien como podría hacerse.
  #2 (permalink)  
Antiguo 11/10/2010, 08:30
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: tbody scroll

Podrías hacer algo así
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  5. <title>Document</title>
  6.  
  7. .foo td, .foo th{
  8.     width: 100px;
  9. }
  10. #tbody{
  11.     height: 200px;
  12.     overflow: auto;
  13. }
  14.  
  15. </head>
  16.  
  17. <table class="foo">
  18.     <tr>
  19.         <th>columna 1</th>
  20.         <th>columna 2</th>
  21.         <th>columna 3</th>
  22.     </tr>
  23. <div id="tbody">
  24.     <table class="foo">
  25.         <tr>
  26.             <td>columna 1</td>
  27.             <td>columna 2</td>
  28.             <td>columna 3</td>
  29.         </tr>
  30.         <tr>
  31.             <td>columna 1</td>
  32.             <td>columna 2</td>
  33.             <td>columna 3</td>
  34.         </tr>
  35.         <tr>
  36.             <td>columna 1</td>
  37.             <td>columna 2</td>
  38.             <td>columna 3</td>
  39.         </tr>
  40.         <tr>
  41.             <td>columna 1</td>
  42.             <td>columna 2</td>
  43.             <td>columna 3</td>
  44.         </tr>
  45.         <tr>
  46.             <td>columna 1</td>
  47.             <td>columna 2</td>
  48.             <td>columna 3</td>
  49.         </tr>
  50.         <tr>
  51.             <td>columna 1</td>
  52.             <td>columna 2</td>
  53.             <td>columna 3</td>
  54.         </tr>
  55.         <tr>
  56.             <td>columna 1</td>
  57.             <td>columna 2</td>
  58.             <td>columna 3</td>
  59.         </tr>
  60.         <tr>
  61.             <td>columna 1</td>
  62.             <td>columna 2</td>
  63.             <td>columna 3</td>
  64.         </tr>
  65.         <tr>
  66.             <td>columna 1</td>
  67.             <td>columna 2</td>
  68.             <td>columna 3</td>
  69.         </tr>
  70.         <tr>
  71.             <td>columna 1</td>
  72.             <td>columna 2</td>
  73.             <td>columna 3</td>
  74.         </tr>
  75.         <tr>
  76.             <td>columna 1</td>
  77.             <td>columna 2</td>
  78.             <td>columna 3</td>
  79.         </tr>
  80.         <tr>
  81.             <td>columna 1</td>
  82.             <td>columna 2</td>
  83.             <td>columna 3</td>
  84.         </tr>
  85.     </table>
  86. </div>
  87. </body>
  88. </html>
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #3 (permalink)  
Antiguo 11/10/2010, 09:21
 
Fecha de Ingreso: diciembre-2009
Mensajes: 183
Antigüedad: 8 años
Puntos: 5
Respuesta: tbody scroll

Gracias por responder,

lo intentaré de este modo
  #4 (permalink)  
Antiguo 11/10/2010, 13:00
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: tbody scroll

DarkWater:

Como dijo abimaelrc, vas a tener que recurrir a un div, pero en el código que te paso vas a necesitar posicionar el div , ya sea con absolute o fixed

Por otra parte, dependiendo del texto de las celdas, requriras un ajuste preciso, para respetar el ancho de las celdas de la tabla superior que actuán como encabezados de la tabla de contenido.

Te dejo un código, para solucionar eso, compatible con FF,IE,Opera, Chrome y Safari
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
  4. <title>Tabla con Scroll CrossBrowser</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta http-equiv="Content-Language" content="ES" />
  7. <meta name="copyright" content="&copy; 2006, Guillermo Gianello" xml:lang="es" lang="es" />
  8. <meta name="author" content="http://emprear.com"  xml:lang="es" lang="es" />
  9.  
  10. <style type="text/css">
  11. /*<![CDATA[*/
  12.  
  13. div {
  14. height: 100px;
  15. overflow: auto;
  16. overflow-y: auto;
  17. overflow-x: hidden;
  18. width: 515px;
  19. border-bottom: solid 1px #000;
  20. border-right: solid 1px #000;
  21. }
  22.  
  23. table {
  24. background-color: #EFEFEF;
  25. color: black;
  26. table-layout: fixed;
  27. width: 500px;
  28. }
  29.  
  30. table.titulos {
  31. width: 500px;
  32. }
  33.  
  34. th, td {
  35. border: 1px solid black;
  36. padding: 4px;
  37. white-space: pre; /* CSS 2.0 */
  38. white-space: pre-wrap; /* CSS 2.1 */
  39. white-space: pre-line; /* CSS 3.0 */
  40. white-space: -pre-wrap; /* Opera 4-6 */
  41. white-space: -o-pre-wrap; /* Opera 7 */
  42. white-space: -moz-pre-wrap; /* Mozilla */
  43. white-space: -hp-pre-wrap; /* HP */
  44. word-wrap: break-word; /* IE 5+ */
  45. }
  46.  
  47. tr.headers {
  48. background-color: #E9B61B;
  49. }
  50.  
  51. /*]]>*/
  52. </head>
  53.  
  54. <table class="titulos" width="500">
  55. <tr class="headers">
  56. <th>Condiciones</th>
  57. <th>Especificaciones y manual del Usuario</th>
  58. <th>Referencia del Producto</th>
  59. <th>Soporte</th>
  60. </tr>
  61.  
  62. <div>
  63. <table width="500">
  64.  
  65. <tr>
  66. <td>Atttes klsakdl lkdlkslk lklkllkl asklasd lkdlkl alkd alkdl al lad laklklkl adklak lkdlklakd</td>
  67. <td>xxxxxxxx</td>
  68. <td>xxxxxx</td>
  69. <td>xxxxxxx</td>
  70. </tr>
  71.  
  72. <tr>
  73. <td>xxxxxxxx 888</td>
  74. <td>xxxxxxxx DDDD </td>
  75. <td>xxxxxxxxxxx SSSSS</td>
  76. <td>xxxxxxx</td>
  77. </tr>
  78.  
  79. <tr>
  80. <td>xxxxx</td>
  81. <td>xxxxxx</td>
  82. <td>xxxxxxxxx</td>
  83. <td>xxxxxxxxxxx</td>
  84. </tr>
  85.  
  86. <tr>
  87. <td>xxxxxxxxxxxxxxxxxxx</td>
  88. <td>xxxxxx xxxxxxxxxx</td>
  89. <td>x xxxxxxxxxxxxxxxxxxxxxx</td>
  90. <td>xxxxxxxxxx xxxxxxxxxxxxx</td>
  91. </tr>
  92.  
  93. <tr>
  94. <td>xxxxxxxxxxxxxxxxxx</td>
  95. <td>xxxxxxxxxxxxxxxxx</td>
  96. <td>xxxxxxxxxx xxxxxxxxxxxxx</td>
  97. <td>xxxxxx xxxxxxxxxxxxxxxxxxx</td>
  98. </tr>
  99.  
  100. <tr>
  101. <td>x666688 888</td>
  102. <td>xxxxxxxxxxxxxxxxxxxxx</td>
  103. <td>xxxxxxxxxxxxxxxxxxxxxxxxx</td>
  104. <td>xxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxx</td>
  105. </tr>
  106.  
  107. <tr>
  108. <td>xxxxxxxxx xxxxxxxxxxxxx</td>
  109. <td>xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx</td>
  110. <td>xxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxx</td>
  111. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  112. </tr>
  113.  
  114. <tr>
  115. <td>rrrr</td>
  116. <td>x.rrrrrr</td>
  117. <td>RRRR fff x</td>
  118. <td>xxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx xxxxx</td>
  119. </tr>
  120.  
  121. <tr>
  122. <td>ppp yyyy TTT rrrr</td>
  123. <td>222 aaaaaaa sssss</td>
  124. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  125. <td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  126. </tr>
  127.  
  128. <tr>
  129. <td>555 666 888989 000000  99999</td>
  130. <td>x.offsetParent</td>
  131. <td>xxxxxxxx xxxxxxxxxxxxx</td>
  132. <td>xxxx xxxxxxxxxxxxxxx xxxxxx</td>
  133. </tr>
  134.  
  135. <tr>
  136. <td>www mmm dsk kkk</td>
  137. <td>aaa aaaa xxxx aaaa</td>
  138. <td>xxxxxxx xxxxxxxxxx xxxxxxxxx</td>
  139. <td>xxxxxxxxxxxxx xxxxxxxxxxxxxx</td>
  140. </tr>
  141.  
  142. </div>
  143.  
  144. </body>
  145. </html>

Podés hacer que la barra de scroll quede por fuera, como en el ejemplo, o por dentro, haciendo el ancho del div igual al de la tabla

Una demo en

http://foros.emprear.com/html/tbody_scroll2.html

Saludos


Me alucina !!!
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: scroll, tbody
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:50.