SprintDevelop.com - Diseño y desarrollo web - Diseño, desarrollo web,Aplicaciones Móviles, TabletasSprintDevelop.com - Diseño y desarrollo web
Mostrando Codigo - Html
Code

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.
Visitas: 73,625 - 17/10/2003 23:47:30
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
EXPLICACION
Simplemente modificar los colores.
CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


<!-- Codigo ofrecido por Tutores.org -->

  1. <div id=scrolltable style=" background: #eeeeee; overflow:auto;
  2. padding-right: 15px; padding-top: 15px; padding-left: 15px; padding-bottom: 15px;
  3. border-right:  #6699CC 1px solid; border-top: #999999 1px solid;
  4. border-left: #6699CC 1px solid; border-bottom:  #6699CC 1px solid;
  5. scrollbar-arrow-color : #999999; scrollbar-face-color : #666666;
  6. scrollbar-track-color :#3333333 ; position: absolute;
  7. height:200px; left: 100; top: 20; width: 80%">
  8.   <table width="100%" border="1" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" align="center">
  9.     <caption>
  10.     <font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>Tabla
  11.     en scroll </strong></font>
  12.     </caption>
  13.     <colgroup span="1">
  14.     </colgroup>
  15.     <colgroup span="1">
  16.     </colgroup>
  17.     <colgroup span="1">
  18.     </colgroup>
  19.     <thead>
  20.       <tr bgcolor="#666666">
  21.         <th>&nbsp;</th>
  22.         <th>&nbsp;</th>
  23.         <th>&nbsp;</th>
  24.       </tr>
  25.     </thead>
  26.     <tfoot>
  27.     </tfoot>
  28.     <tbody>
  29.       <tr bgcolor="#CCCCCC">
  30.         <td>&nbsp;</td>
  31.         <td>&nbsp;</td>
  32.         <td>&nbsp;</td>
  33.       </tr>
  34.       <tr bgcolor="#999999">
  35.         <td>&nbsp;</td>
  36.         <td>&nbsp;</td>
  37.         <td>&nbsp;</td>
  38.       </tr>
  39.       <tr bgcolor="#CCCCCC">
  40.         <td>&nbsp;</td>
  41.         <td>&nbsp;</td>
  42.         <td>&nbsp;</td>
  43.       </tr>
  44.       <tr bgcolor="#999999">
  45.         <td>&nbsp;</td>
  46.         <td>&nbsp;</td>
  47.         <td>&nbsp;</td>
  48.       </tr>
  49.       <tr bgcolor="#CCCCCC">
  50.         <td>&nbsp;</td>
  51.         <td>&nbsp;</td>
  52.         <td>&nbsp;</td>
  53.       </tr>
  54.       <tr bgcolor="#999999">
  55.         <td>&nbsp;</td>
  56.         <td>&nbsp;</td>
  57.         <td>&nbsp;</td>
  58.       </tr>
  59.       <tr bgcolor="#CCCCCC">
  60.         <td>&nbsp;</td>
  61.         <td>&nbsp;</td>
  62.         <td>&nbsp;</td>
  63.       </tr>
  64.       <tr bgcolor="#999999">
  65.         <td>&nbsp;</td>
  66.         <td>&nbsp;</td>
  67.         <td>&nbsp;</td>
  68.       </tr>
  69.       <tr bgcolor="#CCCCCC">
  70.         <td>&nbsp;</td>
  71.         <td>&nbsp;</td>
  72.         <td>&nbsp;</td>
  73.       </tr>
  74.       <tr bgcolor="#999999">
  75.         <td>&nbsp;</td>
  76.         <td>&nbsp;</td>
  77.         <td>&nbsp;</td>
  78.       </tr>
  79.       <tr bgcolor="#CCCCCC">
  80.         <td>&nbsp;</td>
  81.         <td>&nbsp;</td>
  82.         <td>&nbsp;</td>
  83.       </tr>
  84.       <tr bgcolor="#999999">
  85.         <td>&nbsp;</td>
  86.         <td>&nbsp;</td>
  87.         <td>&nbsp;</td>
  88.       </tr>
  89.       <tr bgcolor="#CCCCCC">
  90.         <td>&nbsp;</td>
  91.         <td>&nbsp;</td>
  92.         <td>&nbsp;</td>
  93.       </tr>
  94.       <tr bgcolor="#999999">
  95.         <td>&nbsp;</td>
  96.         <td>&nbsp;</td>
  97.         <td>&nbsp;</td>
  98.       </tr>
  99.       <tr bgcolor="#CCCCCC">
  100.         <td>&nbsp;</td>
  101.         <td>&nbsp;</td>
  102.         <td>&nbsp;</td>
  103.       </tr>
  104.       <tr bgcolor="#999999">
  105.         <td>&nbsp;</td>
  106.         <td>&nbsp;</td>
  107.         <td>&nbsp;</td>
  108.       </tr>
  109.       <tr bgcolor="#666666">
  110.         <td>&nbsp;</td>
  111.         <td>&nbsp;</td>
  112.         <td>&nbsp;</td>
  113.       </tr>
  114.     </tbody>
  115.   </table>
  116. </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 -->
COMENTARIOS
Comentario usuario
05-01-2011 18:02:09
1 5
Excelente ejemplo!!!
Comentario usuario
MGM
2 5
Muchas Gracias, muy util
Comentario usuario
osvaldo
4 5
excelente..este es eun ejemplo de verdad..no como los que dejan por ahi a medio terminar...
felicitaciones...
Comentario usuario
12-01-2008 23:38:30
3 5
como puedo agregar imagen con link en cada celda?
Comentario usuario
18-05-2010 07:23:15
3 5
como puedo agregar imagen con link en cada celda?
Comentario usuario
MARCOS
1 5
simple y directo...muy util
muchisimas gracias.
Comentario usuario
23/09/2005 22.53.03
4 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
Parcerus
5 5
Gracias, me sirvió bastante.
Comentario usuario
Diiego
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"
Comentario usuario
Kaysiho
1 5
Excelente... Solo me necesite los DIV jeje gracias
Comentario usuario
genau
3 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
Aprendis
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
21/03/2005 16.36.25
4 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

Usuario:
Email:
Comentario:
Codigo Seguridad


Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado

Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.