Foros del Web » Creando para Internet » CSS »

Problema con thead, tbody, tfoot y scroll

 Estas en el tema de Problema con thead, tbody, tfoot y scroll en el foro de CSS en Foros del Web. Hola a todos Tengo el siguiente problema... tengo una tabla con la siguiente composición Código: <table class="tabla_listado"> <thead> <tr> <th>Cantidad</th> <th>Producto </th> <th>Valor </th> <th>Subtotal ...
  #1 (permalink)  
Antiguo 09/12/2005, 12:39
 
Fecha de Ingreso: octubre-2004
Mensajes: 143
Antigüedad: 20 años, 2 meses
Puntos: 0
Problema con thead, tbody, tfoot y scroll
Hola a todos

Tengo el siguiente problema... tengo una tabla con la siguiente composición

Código: 
<table class="tabla_listado">
<thead>
   <tr>
      <th>Cantidad</th>
      <th>Producto </th>
      <th>Valor </th>
      <th>Subtotal </th>
   </tr>
</thead>
<tbody>
   <tr>
      <td> 1</td>
      <td> Azucar</td>
      <td> 100</td>
      <td> 100</td>
   </tr>
   <tr>
      <td> 2</td>
      <td> Aceite</td>
      <td> 100</td>
      <td> 200</td>
   </tr>
   <tr>
      <td> 4</td>
      <td> Sal</td>
      <td> 200</td>
      <td> 800</td>
   </tr>
</tbody>
<tfoot>
   <tr>
      <td>7 </td>
      <td> -- </td>
      <td>400</td>
      <td>1100 </td>
   </tr>
</tfoot>
El asunto es que deseo que el thead y el tfoot queden quietos y se pueda hacer un scroll con el tbody... lo he visto en otros ejemplos, solo que hacen el scroll a la tabla completa...

Por ejemplo con este estilo, me aparece el scroll para la tabla completa

Código: 
...
   border-color:#000000;
   display: block;
   height: 262px;
   overflow: auto;
   width: 100%
...
El asunto es que no puedo agregar ningun codigo html ni css ni nada mas a esa tabla, lo que si puedo hacer es poner todo lo que quiera o que necesite en la hoja de estilo.

Esop.. se entiende lo que deseo ???

voy a ver si puedo hacer un gráfico de esto

Código: 
+------------------------+
|                        |   <-- THEAD
+------------------------+
|                    | + |
|                    | | |
|                    | | | <- TBODY
|                    | | |
|                    | + | 
+------------------------+
|                        |   <-- TFOOT
+------------------------+
Yap, se entiende..., el signo mas con las | imaginense que son el scroll ...

Gracias a todos
  #2 (permalink)  
Antiguo 09/12/2005, 12:54
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 19 años, 8 meses
Puntos: 0
prueba ponerle un height fijo al tbody y overflow:scroll.
claro que solo es teoria

EDIT: nop no funciona...
Última edición por RoQ; 09/12/2005 a las 13:09
  #3 (permalink)  
Antiguo 12/12/2005, 05:03
 
Fecha de Ingreso: octubre-2004
Mensajes: 143
Antigüedad: 20 años, 2 meses
Puntos: 0
Ninguna ayudita mas
  #4 (permalink)  
Antiguo 12/12/2005, 11:55
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 20 años, 6 meses
Puntos: 4
el thead, tbody y tfoot estan de adorno, se pueden reemplazar por 3 capas y ahi no hay problema para poner scroll...
__________________
Internet Explorer SuckS
Download FireFox
  #5 (permalink)  
Antiguo 13/12/2005, 10:54
 
Fecha de Ingreso: octubre-2004
Mensajes: 143
Antigüedad: 20 años, 2 meses
Puntos: 0
Cita:
Iniciado por SiR.CARAJ0DIDA
el thead, tbody y tfoot estan de adorno, se pueden reemplazar por 3 capas y ahi no hay problema para poner scroll...
o sea, tendria que tener una cosa como la que sigue ?

Código: 
....
<tr id="titulo">
   <td>.....
</tr>
<tr id="contenido">
   <td> </td>
   ...
   <td> </td>
</tr>
<tr>
 ....

</tr>
<tr id="final">
...
...
</tr>
Algo así??? por que no se me ocurre otra manera,.. aunque a simple vista no se si sirva, ya que en el contenido tengo mas de una fila...

O si me indicas como seria.. pero la verdad es que eso se me ocurre ahora

Gracias

Saludos
  #6 (permalink)  
Antiguo 13/12/2005, 10:58
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 19 años, 8 meses
Puntos: 0
nop, tendrias que simularlos con div's
Código HTML:
<div id="titulo">
....
</div>
<div="tabla">
<table>
...
</table>
</div>
<div id="pie">
...
</div>
y en el css al div que contiene la tabla le das un alto fijo y oveflow:scroll
  #7 (permalink)  
Antiguo 13/12/2005, 18:08
Avatar de Hououji Ayumu  
Fecha de Ingreso: junio-2005
Ubicación: Queretaro Mexico
Mensajes: 73
Antigüedad: 19 años, 6 meses
Puntos: 1
pues esto es muy facil solo tienes que hacer esto ya solo tienes que darle mas formatos al asunto y ya puedes meterle toodo lo que quieras en el <div>

<table border=1>
<tr>
<td>
titulo de encabezado
</td>
</tr>
<tr>
<td>
<div style='overflow:scroll; width:300; height:400;'}>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
contenido<br>
</div>
</td>
</tr>
<tr>
<td>
pie
</td>
</tr>
</table>
__________________
Sayounara
  #8 (permalink)  
Antiguo 14/12/2005, 10:16
 
Fecha de Ingreso: febrero-2005
Mensajes: 396
Antigüedad: 19 años, 10 meses
Puntos: 1
Lo de thead, tbody y tfoot que están de adorno es un comentario erroneo. tienen bastante utilidad si tienes que presentar datos tabulares de verdad (a la hora de hacer unos buenos estilos de tabla).

Un saludo

Zerjillo
  #9 (permalink)  
Antiguo 18/12/2005, 09:56
 
Fecha de Ingreso: octubre-2004
Mensajes: 143
Antigüedad: 20 años, 2 meses
Puntos: 0
Cita:
Iniciado por Zerjillo
Lo de thead, tbody y tfoot que están de adorno es un comentario erroneo. tienen bastante utilidad si tienes que presentar datos tabulares de verdad (a la hora de hacer unos buenos estilos de tabla).

Un saludo

Zerjillo
Hola

Pero no sirven para lo que deseo hacer... ya que he visto la utilidad que se les puede dar cuando construyes distintos estilos para cada uno (thead, tbody, tfoot)..

Gracias
  #10 (permalink)  
Antiguo 18/12/2005, 19:44
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 19 años, 2 meses
Puntos: 1
Hola a todos.

Cita:
Iniciado por RoQ
prueba ponerle un height fijo al tbody y overflow:scroll.
claro que solo es teoria

EDIT: nop no funciona...
¿Cómo que no? ¿En qué navegadores no funciona el siquiente código?
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>tbody con scroll</title>
<style type="text/css">
tbody { overflow: auto; height: 100px; }
</style>
<table border='1' summary='lista de precios'>
<thead>
   <tr><th>Cantidad</th><th>Producto </th>
       <th>Valor </th><th>Subtotal </th></tr>
</thead>
<tfoot>
   <tr><td>pie</td><td>pie</td>
       <td>pie</td><td>pie</td></tr>
</tfoot>
<tbody>
   <tr><td> 1</td> <td> Azucar</td>
       <td> 100</td><td> 100</td> </tr>
   <tr><td> 2</td> <td> Aceite</td>
       <td> 100</td><td> 200</td> </tr>
   <tr><td> 4</td> <td> Sal</td>
       <td> 200</td><td> 800</td> </tr>
   <tr><td> 1</td> <td> Azucar</td>
       <td> 100</td><td> 100</td> </tr>
   <tr><td> 2</td> <td> Aceite</td>
       <td> 100</td><td> 200</td> </tr>
   <tr><td> 4</td> <td> Sal</td>
       <td> 200</td><td> 800</td> </tr>
</tbody>
<tbody>
   <tr><td> 1</td> <td> Azucar</td>
       <td> 100</td><td> 100</td> </tr>
   <tr><td> 2</td> <td> Aceite</td>
       <td> 100</td><td> 200</td> </tr>
   <tr><td> 4</td> <td> Sal</td>
       <td> 200</td><td> 800</td> </tr>
   <tr><td> 1</td> <td> Azucar</td>
       <td> 100</td><td> 100</td> </tr>
   <tr><td> 2</td> <td> Aceite</td>
       <td> 100</td><td> 200</td> </tr>
   <tr><td> 4</td> <td> Sal</td>
       <td> 200</td><td> 800</td> </tr>
</tbody>
</table>
Por cierto, el tfoot debe ir antes del tbody y no debería contener datos
  #11 (permalink)  
Antiguo 19/12/2005, 05:10
 
Fecha de Ingreso: octubre-2004
Mensajes: 143
Antigüedad: 20 años, 2 meses
Puntos: 0
Hola a todos

El código que cita el colega Jorolo, si funciona, en Firefox 1.5 (el ultimo). Ahora no tengo IExplorer para verificar si en realidad funciona ahí.

Quizas justo como son los de Microsoft, este código no funcione ahí

La otra consulta, es que aparece el scroll en la barra lateral, pero tambien en la barra horizontal.. y no encuentro manera de quitarla

Bueno, gracias a todos, ya cada vez nos acercamos mas al resultado esperado

Saludos
Última edición por jotamachuca; 19/12/2005 a las 05:21
  #12 (permalink)  
Antiguo 19/12/2005, 07:17
 
Fecha de Ingreso: octubre-2004
Mensajes: 143
Antigüedad: 20 años, 2 meses
Puntos: 0
Hola a atodos

Les cuento. Ahora estoy desde un pc con Windows con IExplorer 6.0.2600 y NO FUNCIONA EL SCROLL

En realidad, me imagino que no funciona por que las tablas en si son generadas dinamicamente, mediante Ajax.. pero en Firefox andan inpeques...esta basura de IExplorer...

Ademas, acabo de probar el ejemplo en el mismo browser que estoy probando las tablas dinamicas, y el scroll tampoco anda..

En resumen... Como podria hacer una solución que si funcione en IExplorer para el scroll, parece que me tendré que resignar a modificar el código que generan las tablas que es lo que no quiero

Saludos a todos
  #13 (permalink)  
Antiguo 19/12/2005, 14:45
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 19 años, 2 meses
Puntos: 1
tbody con scroll v0.2
Hola a todos, hola jotamachuca.

Esto es el futuro, hoy (CSS3)
Funciona como mínimo en FF1.5

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>tbody con scroll v0.2</title>
<style type="text/css">
tbody { height: 100px; overflow-x: hidden; overflow-y: scroll; }
</style>
<table border='1'>
<thead>
   <tr><th>Cantidad</th><th>Producto </th>
       <th>Valor </th><th>Subtotal </th></tr>
</thead>
<tfoot>
   <tr><th>Cantidad</th><th>Producto </th>
       <th>Valor </th><th>Subtotal </th></tr>
</tfoot>
<tbody>
   <tr><td> 1</td> <td> Azucar</td>
       <td> 100</td><td> 100</td> </tr>
   <tr><td> 2</td> <td> Aceite</td>
       <td> 100</td><td> 200</td> </tr>
   <tr><td> 4</td> <td> Sal</td>
       <td> 200</td><td> 800</td> </tr>
   <tr><td> 1</td> <td> Azucar</td>
       <td> 100</td><td> 100</td> </tr>
   <tr><td> 2</td> <td> Aceite</td>
       <td> 100</td><td> 200</td> </tr>
   <tr><td> 4</td> <td> Sal</td>
       <td> 200</td><td> 800</td> </tr>
</tbody>
<tbody>
   <tr><td> 10</td> <td> Azucar</td>
       <td> 100</td><td> 100</td> </tr>
   <tr><td> 20</td> <td> Aceite</td>
       <td> 100</td><td> 200</td> </tr>
   <tr><td> 40</td> <td> Sal</td>
       <td> 200</td><td> 800</td> </tr>
   <tr><td> 10</td> <td> Azucar</td>
       <td> 100</td><td> 100</td> </tr>
   <tr><td> 20</td> <td> Aceite</td>
       <td> 100</td><td> 200</td> </tr>
   <tr><td> 40</td> <td> Sal</td>
       <td> 200</td><td> 800</td> </tr>
</tbody>
</table>
  #14 (permalink)  
Antiguo 13/01/2006, 08:55
 
Fecha de Ingreso: octubre-2004
Mensajes: 143
Antigüedad: 20 años, 2 meses
Puntos: 0
Hola a todos

Revivo este topics para no crear uno nuevo por que me encuentro con el siguiente problema

Resulta que al final la creación de tablas mediante firefox funciona impeque, pero con IExplorer sale un asco, en realidad el IExplorer no me muestra el scroll, y me envia todo de un golpe

Me explico mejor...

La idea es que mediante un código Ajax cree una tabla dinámica, mediante una consulta a una base de datos, y como los datos de esta tabla pueden variar, se define un largo por defecto, de manera que cuando se supere este largo, aparesca el scroll... .

Esto en Firefox funciona, pero en IExplorer no....

Un ejemplo de codigo
Código: 
<table border=0 align=center class="scroll_resultado_busqueda">
<tr>
   <td> EJemplo 1 </td>
   <td> Presione aca </td>
</tr>
<tr>
   <td> EJemplo 2</td>
   <td> Presione aca </td>
</tr>
<tr>
   <td> EJemplo 3</td>
   <td> Presione aca </td>
</tr>
<tr>
   <td>EJemplo 4</td>
   <td> Presione aca </td>
</tr>
<tr>
   <td> EJemplo 5</td>
   <td> Presione aca </td>
</tr>
</table>
y el estilo
Código: 
.scroll_resultado_busqueda 
{
   overflow:scroll;
   height:180px;
}

.scroll_resultado_busqueda td
{
   font-size:9px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   margin-left:10px;
   border: 1px solid black;
}
SI alguien me indica como hacer que esta tabla, que es generada con Ajax, aparesca con scroll le agradeceria un milllllonnnn de veces

Saludos

Gracas
  #15 (permalink)  
Antiguo 16/01/2006, 03:08
 
Fecha de Ingreso: abril-2002
Mensajes: 1.014
Antigüedad: 22 años, 8 meses
Puntos: 8
Hola amigos, ayudado de las soluciones que se aportan creo que lo he conseguido, probado en firefox e IE:

Código: 
 <html>
<body>
<div id="p1" STYLE="margin-left:100px;">
<table width="500px" border=1>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<tr>
</table>
</div>


<div id="pp2" style="margin-left:100px;overflow:scroll;height:200px;width:500px" align="center">
<table width="500px" border=1 >                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr>                <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr>
</table>
</div>
</body>
</html>
Para que aparezcan o no las barras de desplazamiento según los datos contenidos: poner "overflow:auto"

Un saludo y gracias !
Última edición por MikiBroki; 16/01/2006 a las 04:38
  #16 (permalink)  
Antiguo 16/01/2006, 06:41
 
Fecha de Ingreso: julio-2005
Ubicación: Santiago de Compostela
Mensajes: 80
Antigüedad: 19 años, 5 meses
Puntos: 0
Una buena referencia http://icant.co.uk/csstablegallery
  #17 (permalink)  
Antiguo 17/01/2006, 15:00
 
Fecha de Ingreso: enero-2006
Mensajes: 1
Antigüedad: 18 años, 11 meses
Puntos: 0
Un ejemplo que parece que funciona
www[punto]imaputz[punto]com/cssStuff/bigFourVersion.html

Un saludo a todos
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 20:46.