tbody scroll

DarkWater · #1 (**permalink**) 11/10/2010, 05:49

Hola,

he estando intentando hacer un scroll vertical en el tbody de una tabla pero no consigo que funcione en todos los navegadores, de hecho solo he conseguido que funcione en FireFox.

Ejemplo:

Código HTML:

<table>
    <thead>
        <tr>
            <th>
                columna 1
            </th>
            <th>
                columna 2
            </th>
            <th>
                columna 3
            </th>
        </tr>
    </thead>
    <tbody>
            <td>
                columna 1
            </td>
            <td>
                columna 2
            </td>
            <td>
                columna 3
            </td>
    </tbody>
</table>

A TBODY le pongo una altura determimada con CSS pero no consigo que funcione en todos los navegadores.

Sabe álguien como podría hacerse.

abimaelrc · #2 (**permalink**) 11/10/2010, 07:30

Podrías hacer algo así

Código HTML:

Ver original<!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" />
<title>Document</title>
 
<style>
.foo td, .foo th{
    width: 100px;
}
#tbody{
    height: 200px;
    overflow: auto;
}
</style>
 
</head>
<body>
 
<table class="foo">
    <tr>
        <th>columna 1</th>
        <th>columna 2</th>
        <th>columna 3</th>
    </tr>
</table>
<div id="tbody">
    <table class="foo">
        <tr>
            <td>columna 1</td>
            <td>columna 2</td>
            <td>columna 3</td>
        </tr>
        <tr>
            <td>columna 1</td>
            <td>columna 2</td>
            <td>columna 3</td>
        </tr>
        <tr>
            <td>columna 1</td>
            <td>columna 2</td>
            <td>columna 3</td>
        </tr>
        <tr>
            <td>columna 1</td>
            <td>columna 2</td>
            <td>columna 3</td>
        </tr>
        <tr>
            <td>columna 1</td>
            <td>columna 2</td>
            <td>columna 3</td>
        </tr>
        <tr>
            <td>columna 1</td>
            <td>columna 2</td>
            <td>columna 3</td>
        </tr>
        <tr>
            <td>columna 1</td>
            <td>columna 2</td>
            <td>columna 3</td>
        </tr>
        <tr>
            <td>columna 1</td>
            <td>columna 2</td>
            <td>columna 3</td>
        </tr>
        <tr>
            <td>columna 1</td>
            <td>columna 2</td>
            <td>columna 3</td>
        </tr>
        <tr>
            <td>columna 1</td>
            <td>columna 2</td>
            <td>columna 3</td>
        </tr>
        <tr>
            <td>columna 1</td>
            <td>columna 2</td>
            <td>columna 3</td>
        </tr>
        <tr>
            <td>columna 1</td>
            <td>columna 2</td>
            <td>columna 3</td>
        </tr>
    </table>
</div>
</body>
</html>

DarkWater · #3 (**permalink**) 11/10/2010, 08:21

Gracias por responder,

lo intentaré de este modo

emprear · #4 (**permalink**) 11/10/2010, 12:00

DarkWater:

Como dijo abimaelrc, vas a tener que recurrir a un div, pero en el código que te paso vas a necesitar posicionar el div , ya sea con absolute o fixed

Por otra parte, dependiendo del texto de las celdas, requriras un ajuste preciso, para respetar el ancho de las celdas de la tabla superior que actuán como encabezados de la tabla de contenido.

Te dejo un código, para solucionar eso, compatible con FF,IE,Opera, Chrome y Safari

Código HTML:

Ver original<!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" xml:lang="es" lang="es" >
<head>
<title>Tabla con Scroll CrossBrowser</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ES" />
<meta name="copyright" content="&copy; 2006, Guillermo Gianello" xml:lang="es" lang="es" />
<meta name="author" content="http://emprear.com"  xml:lang="es" lang="es" />
 
<style type="text/css">
/*<![CDATA[*/
 
div {
height: 100px;
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
width: 515px;
border-bottom: solid 1px #000;
border-right: solid 1px #000;
}
 
table {
background-color: #EFEFEF;
color: black;
table-layout: fixed;
width: 500px;
}
 
table.titulos {
width: 500px;
}
 
th, td {
border: 1px solid black;
padding: 4px;
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP */
word-wrap: break-word; /* IE 5+ */
}
 
tr.headers {
background-color: #E9B61B;
}
 
/*]]>*/
</style>
</head>
<body>
 
<table class="titulos" width="500">
<tr class="headers">
<th>Condiciones</th>
<th>Especificaciones y manual del Usuario</th>
<th>Referencia del Producto</th>
<th>Soporte</th>
</tr>
</table>
 
<div>
<table width="500">
 
<tr>
<td>Atttes klsakdl lkdlkslk lklkllkl asklasd lkdlkl alkd alkdl al lad laklklkl adklak lkdlklakd</td>
<td>xxxxxxxx</td>
<td>xxxxxx</td>
<td>xxxxxxx</td>
</tr>
 
<tr>
<td>xxxxxxxx 888</td>
<td>xxxxxxxx DDDD </td>
<td>xxxxxxxxxxx SSSSS</td>
<td>xxxxxxx</td>
</tr>
 
<tr>
<td>xxxxx</td>
<td>xxxxxx</td>
<td>xxxxxxxxx</td>
<td>xxxxxxxxxxx</td>
</tr>
 
<tr>
<td>xxxxxxxxxxxxxxxxxxx</td>
<td>xxxxxx xxxxxxxxxx</td>
<td>x xxxxxxxxxxxxxxxxxxxxxx</td>
<td>xxxxxxxxxx xxxxxxxxxxxxx</td>
</tr>
 
<tr>
<td>xxxxxxxxxxxxxxxxxx</td>
<td>xxxxxxxxxxxxxxxxx</td>
<td>xxxxxxxxxx xxxxxxxxxxxxx</td>
<td>xxxxxx xxxxxxxxxxxxxxxxxxx</td>
</tr>
 
<tr>
<td>x666688 888</td>
<td>xxxxxxxxxxxxxxxxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxxxxxxxxx</td>
<td>xxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxx</td>
</tr>
 
<tr>
<td>xxxxxxxxx xxxxxxxxxxxxx</td>
<td>xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx</td>
<td>xxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
</tr>
 
<tr>
<td>rrrr</td>
<td>x.rrrrrr</td>
<td>RRRR fff x</td>
<td>xxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx xxxxx</td>
</tr>
 
<tr>
<td>ppp yyyy TTT rrrr</td>
<td>222 aaaaaaa sssss</td>
<td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxxxxxxxxxx</td>
</tr>
 
<tr>
<td>555 666 888989 000000  99999</td>
<td>x.offsetParent</td>
<td>xxxxxxxx xxxxxxxxxxxxx</td>
<td>xxxx xxxxxxxxxxxxxxx xxxxxx</td>
</tr>
 
<tr>
<td>www mmm dsk kkk</td>
<td>aaa aaaa xxxx aaaa</td>
<td>xxxxxxx xxxxxxxxxx xxxxxxxxx</td>
<td>xxxxxxxxxxxxx xxxxxxxxxxxxxx</td>
</tr>
 
</table>
</div>
 
</body>
</html>

Podés hacer que la barra de scroll quede por fuera, como en el ejemplo, o por dentro, haciendo el ancho del div igual al de la tabla

Una demo en

http://foros.emprear.com/html/tbody_scroll2.html

Saludos

Me alucina !!!