tablas y scroll

activada · #1 (**permalink**) 22/04/2003, 11:46

Se me ha ocurrido poner en una celda de una tabla un scroll (igual que se l pone a las capas). He estado investigando pero no he encontrado la solución ¿es posible hacer esto?¿m podeis ayudar?. Yo trabajo en la ventana de diseño ¿se puede hacer desde aquí?. Gracias

Cain · #2 (**permalink**) 22/04/2003, 11:47

No. No puedes poner scroll a una celda.

Debes usar capas, iframes, textareas o algo parecido para poner ese scroll.

activada · #3 (**permalink**) 22/04/2003, 11:49

Y entonces como puedo hacer que la capa no se mueva de esta celda??? Se puede????. Gracias Cain

tunait · #4 (**permalink**) 22/04/2003, 17:39

Lo que puedes hacer es insertar una capa dentro de tu celda. No le des ni posición top ni left y dale unas medidas exactas. En el panel de propiedades, donde dice desb. (desbordamiento) (si lo tienes en inglés el programa, busca overflow) y seleccionas "auto".

Eso matendrá tu celda en un tamaño fijo y dentro de la celda la capa se encarga de ocultar lo que no quepa y agregar una barra de scroll.

activada · #5 (**permalink**) 23/04/2003, 10:01

Gracias pero creo que no es suficiente. Cuando inserto una capa en una celda esta va independiente de la celda con lo cual corro el riesgo de q se mueva. No pasaria así si hubiera alguna forma d hacer q la capa s bloquee dentro de la celda. Existe esta función??????

Bochini · #6 (**permalink**) 20/06/2007, 11:34

Tunait !!!

Hace unos años me explicaste que era posible y me explicaste el tema del /div para poder hacer scroll dentro de celdas, pero no recuerdo como ni encontré aquella maravillosa solución que me habías dado.

La que proponés ahora parece más interesante, la voy a probar a ver que onda, si consigo hacerlo ya que JUSTAMENTE necesito hacer una celda que permita que si el texto supera el espacio determinado de la misma habilite el scroll y que ADEMAS pueda personalizarse.

La Leyenda que vino de Zárate

editado:
Veo que recuperé mi antigüedad real ! cómo lo solucionastes ? FELICIDADES

Daniel Ulczyk · #7 (**permalink**) 22/06/2007, 11:35

Cita:

Gracias pero creo que no es suficiente. Cuando inserto una capa en una celda esta va independiente de la celda con lo cual corro el riesgo de q se mueva. No pasaria así si hubiera alguna forma d hacer q la capa s bloquee dentro de la celda. Existe esta función??????

Muchas veces es una buena práctica dejar de lado que el editor de marras ande por ahí insertando las capas

Con unas pocas líneas de CSS, se puede lograr la altura y ancho de nuestra capa y, ya que estamos; que el resto de las celdas tengan también las mismas dimensiones que la capa con scroll.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tabla con scroll en una celda</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
table {
    width: 600px;
}
td {
    width: 300px;
    height: 50px;
    color: Black;
    background-color: #CCCCCC;
}
th {
    background-color: #2F4F4F;
    color: #FFFFFF;
    text-align: left;
}
.scrollable { 
width: 300px; 
height: 50px; 
overflow: auto;

} 

</style>
</head>
<body>


    <table summary="Lorem ipsum dolor sit amet, consectetuer adipiscing elit.">
      <caption>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      </caption>
      <thead>
        <tr>
          <th scope="col">No.</th>
          <th scope="col">alfa</th>
          <th scope="col">beta</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td colspan="3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
        </tr>
      </tfoot>
      <tbody>
        <tr class="distinta">
          <th scope="row">a</th>
          <td><span>-</span></td>
          <td><div class="scrollable">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tristique. Aenean ac lacus eget metus porttitor facilisis. Aenean augue.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tristique. Aenean ac lacus eget metus porttitor facilisis. Aenean augue.</p>
      </div></td>
        </tr>
        <tr>
          <th scope="row">b</th>
          <td><span>-</span></td>
          <td><span>-</span></td>
        </tr>
      </tbody>
    </table>
</body>
</html>

Espero que les sea útil.

Bochini · #8 (**permalink**) 22/06/2007, 12:26

muy util realmente, yo al final encontré el codigo que me había pasado tunait (no respondiste) y pude resolverlo.

lo paso a contnuación.

****
<td width="300" height="571" align="center" valign="middle">
<div style="overflow:auto; width: 300px; height: 500px">
<img src="images/250x200.jpg" width="250" height="200"><br>
<br>
<img src="images/250x350.jpg" width="250" height="350">
</div>
</td>
****