Scroll dentro de una celda

AJDC · #1 (**permalink**) 22/03/2008, 01:33

Saludos.
Se me plantea una duda, y es si se puede hacer algún tipo de scroll en el contenido de una celda.

Sé cómo hacerlo en un marco, dentro de un conjunto de marcos, pero ... ¿se puede dentro de una celda? ¿Cómo ?

Gracias

aloqui · #2 (**permalink**) 22/03/2008, 02:43

Puedes hacerlo por ejemplo usando la propiedad: "overflow:auto;"
Lo más recomendable es con CSS. Por ejemplo declaras una clase así:

.conScroll { overflow:auto; text-align:center; height:390px; width:510px; }

Y luego usas dicha clase en las celdas que quieras que tengan scroll:

<td class="conScroll">....</td>

AJDC · #3 (**permalink**) 22/03/2008, 04:46

Muchas garcias.. intentaré llevarlo a la práctica

AJDC · #4 (**permalink**) 22/03/2008, 10:10

Pues no me ha funcionado ...
Si le meto el contenido a la celda, ésta se agranda, pero luego en el naegador no se mantiene el tamaño ni me muestra el scroll...

¿alguna otra sugerencia?

gracias

flanagan44 · #5 (**permalink**) 22/03/2008, 12:00

Cita:

Iniciado por AJDC

Pues no me ha funcionado ...
Si le meto el contenido a la celda, ésta se agranda, pero luego en el naegador no se mantiene el tamaño ni me muestra el scroll...

¿alguna otra sugerencia?

gracias

intenta con overflow:scroll;

y si no como con las capas seguro que funciona podrias hacer algo asi como:

<td><div style:"overflow:scroll;"> CONTENIDO </div></td>

perdona con los errores, pero tendria que ser asi

Daniel Ulczyk · #6 (**permalink**) 22/03/2008, 14:29

En un ejemplo un poco más completo, aquí se puede ver como insertar un DIV dentro de una celda para que la misma tenga un scroll:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 78%;
}
table {
    width: 90%;
    height: 100%;
    border: 0;
}
#LayerTexto {
    width:100%;
    height:100px;
    z-index:1;
    overflow: auto;
    background-color: #00CCFF;
}

#LayerTexto p {
    font-family: "Times New Roman", Times, serif;
    font-size: 165%;
    padding: 5px 5px 10px 5px;
    letter-spacing: -1px;    
}
td {
    vertical-align: top;
}
.normal {
    height: 100px;
    padding: 5px 5px 10px 5px;
}
.resaltado {
    background-color: #CCFF99;
    padding: 10px 0 10px 5px;
    font-style: italic;

}
</style>
<title>demo scroll en celda</title>
</head>
<body>

<table>
<tr>
<td>La celda adyacente tiene un scroll mediante un div </td>
<td>
<div id="LayerTexto" class="scroll">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus euismod. Proin ut nisl id sem malesuada ullamcorper. Curabitur sit amet sapien vel enim iaculis sagittis. Aenean id nibh. Nunc aliquam est at tellus. Sed sollicitudin interdum mi. Quisque at mauris vitae lectus accumsan faucibus. Vestibulum at est. Mauris vitae ipsum. Pellentesque at urna. Aliquam nunc. Quisque fermentum, sapien eget adipiscing cursus, sapien quam rutrum nulla, in tempor diam nulla quis nunc. Pellentesque gravida eleifend arcu.</p>
</div></tr>
<tr class="normal">
  <td>La celda adyacente no tiene scroll. </td>
  <td class="resaltado">Esta celda no tiene scroll, no tiene div. Saludos! 
</tr>
</table>
</body>
</html>

Mikmoro · #7 (**permalink**) 22/03/2008, 15:36

Sencillo y claro.

Un salvedad: ¿para qué la class="scroll" dentro del div, si luego no se declara?

Mikel.

Daniel Ulczyk · #8 (**permalink**) 22/03/2008, 15:47

Cierto. No debiera estar presente la class.
Saludos!