Html - Scroll de una tabla
Códigos Html
El ejemplo muestra como podemos hacer un scroll a una tabla utilizando al mismo tiempo hoja de estilo css y un layer o capa, lo que podemos colorearla a nuestro gusto.
Tutores.org
Mostrando Codigo - Html
EXPLICACION
Simplemente modificar los colores.
CODIGO
<!-- Codigo ofrecido por Tutores.org -->
- <div id=scrolltable style=" background: #eeeeee; overflow:auto;
- padding-right: 15px; padding-top: 15px; padding-left: 15px; padding-bottom: 15px;
- border-right: #6699CC 1px solid; border-top: #999999 1px solid;
- border-left: #6699CC 1px solid; border-bottom: #6699CC 1px solid;
- scrollbar-arrow-color : #999999; scrollbar-face-color : #666666;
- scrollbar-track-color :#3333333 ; position: absolute;
- height:200px; left: 100; top: 20; width: 80%">
- <table width="100%" border="1" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" align="center">
- <caption>
- </caption>
- <colgroup span="1">
- </colgroup>
- <colgroup span="1">
- </colgroup>
- <colgroup span="1">
- </colgroup>
- <thead>
- <tr bgcolor="#666666">
- </tr>
- </thead>
- <tfoot>
- </tfoot>
- <tbody>
- <tr bgcolor="#CCCCCC">
- </tr>
- <tr bgcolor="#999999">
- </tr>
- <tr bgcolor="#CCCCCC">
- </tr>
- <tr bgcolor="#999999">
- </tr>
- <tr bgcolor="#CCCCCC">
- </tr>
- <tr bgcolor="#999999">
- </tr>
- <tr bgcolor="#CCCCCC">
- </tr>
- <tr bgcolor="#999999">
- </tr>
- <tr bgcolor="#CCCCCC">
- </tr>
- <tr bgcolor="#999999">
- </tr>
- <tr bgcolor="#CCCCCC">
- </tr>
- <tr bgcolor="#999999">
- </tr>
- <tr bgcolor="#CCCCCC">
- </tr>
- <tr bgcolor="#999999">
- </tr>
- <tr bgcolor="#CCCCCC">
- </tr>
- <tr bgcolor="#999999">
- </tr>
- <tr bgcolor="#666666">
- </tr>
- </tbody>
- </table>
- </div>
ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Scroll de una tabla" href="http://www.tutores.org/codigo/729/" target="_blank">Scroll de una tabla</a>
<!-- Final enlace Tutores.org -->
<a title="Tutores.org - Scroll de una tabla" href="http://www.tutores.org/codigo/729/" target="_blank">Scroll de una tabla</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
osvaldoosvaldo
4
5
excelente..este es eun ejemplo de verdad..no como los que dejan por ahi a medio terminar...
felicitaciones...
felicitaciones...
Comentario usuario
David
23/09/2005 22.53.03
2
5
Yo estoy diseñando una web y se me ocurrió "experimentar". Uso el KompoZer y no te da la opción de ponerle una imagen de fondo a una celda, pero si sustituimos donde pone background-color (0,0,0); por background-image: url(IMAGEN.EXTENSIÓN); el fondo de la celda pasa a ser esa imagen =D
Comentario usuario
DiiegoDiiego
3
5
<div style="overflow:scroll; overflow-x:hidden; height:680px; padding:0" align="center">
<table width="500" align="center"
<tr bgcolor=#E4E4E4>
<td>Content</td>
<td>content</td>
<td>Content</td>
</tr>
<tr bgcolor=#E4E4E4>
<td>Content</td>
<td>content</td>
<td>Content</td>
</tr>
</table>
</div>
y asi sucecivamente segun lo que necesiten, si decean que la celda tenga una imagen de fondo, en la etiqueta cambian "bgcolor" por: background="Link de la Imagen"
<table width="500" align="center"
<tr bgcolor=#E4E4E4>
<td>Content</td>
<td>content</td>
<td>Content</td>
</tr>
<tr bgcolor=#E4E4E4>
<td>Content</td>
<td>content</td>
<td>Content</td>
</tr>
</table>
</div>
y asi sucecivamente segun lo que necesiten, si decean que la celda tenga una imagen de fondo, en la etiqueta cambian "bgcolor" por: background="Link de la Imagen"
Comentario usuario
genaugenau
1
5
una pregunta esa tabla se puede hacer en codigos bbcodes, y como se podria hacer con un fondo flash o algo por el estilo
Comentario usuario
AprendisAprendis
4
5
Hola, esto es justo lo que estaba buscando, solamente deseo saber como cambiar el scroll de tabla de vertical a Horizontal. De antemano Gracias!!!
Comentario usuario
Gerardo
21/03/2005 16.36.25
5
5
Como ppuedo hacer para que los encabezados de las columnas permanezcan fijos... que no se muevan con el scroll de las filas
INSERTAR COMENTARIO