Foros del Web » Creando para Internet » CSS »

Scroll dentro de una tabla y 1 columna fija, con css...

Estas en el tema de Scroll dentro de una tabla y 1 columna fija, con css... en el foro de CSS en Foros del Web. Hola, necesito de vuestro coocimientos. He leido una cantidad de manuales y no encuentro nada que me pueda ayudar. les cuento que necesito hacer una ...
  #1 (permalink)  
Antiguo 18/10/2007, 17:14
naf
 
Fecha de Ingreso: agosto-2007
Ubicación: Chile
Mensajes: 23
Antigüedad: 10 años, 3 meses
Puntos: 0
Scroll dentro de una tabla y 1 columna fija, con css...

Hola, necesito de vuestro coocimientos. He leido una cantidad de manuales y no encuentro nada que me pueda ayudar. les cuento que necesito hacer una tabla que tenga la primera columna fija y que se genere un scroll en el resto de las columnas, ya que esta tabla puede tener N columnas.
Esto me funciona en casi todos los navegadores, el problema es que en ie 6 al igual que en safari, la tabla se desborda, en cambio en opera y en firefox funciona perfectamente. Pero como ya saben la mayoria de las personas utilizan el ie. Es por eso que debo dejar la tabla usable para todos los navegadores.



Aqui les dejo el link de la pagina, para que la puedan ver ...

Por favor, no se que hacer para que se vea bien :( S. O. S.

Última edición por naf; 19/10/2007 a las 07:10
  #2 (permalink)  
Antiguo 19/10/2007, 01:39
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: Scroll dentro de una tabla y 1 columna fija, con css...

Hola naf

Mira este enlace:

http://www.imaputz.com/cssStuff/bigFourVersion.html

Saludos,
  #3 (permalink)  
Antiguo 25/10/2007, 11:38
naf
 
Fecha de Ingreso: agosto-2007
Ubicación: Chile
Mensajes: 23
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: Scroll dentro de una tabla y 1 columna fija, con css...

gracias, por responder. Algo he resuelto no de la mejor forma, pero por lo menos ahora puedo explicar bien lo que necesito.
Tego una tabla con 2 colunas, para dejar una columna fija, lo que hice fue unir las celdas de la otra coluna e inserte una nueva tabla, para poder generar scrol, aca les voy a dejar el codigo.
Codigo html.
Cita:
<div class="cajatabla">
<table border="0" cellspacing="0" id="tabla-columna" >
<tr class="fondo-tr">
<td style="width:20%" class="fondo-tr-col">&nbsp;</td>
<td rowspan="6" valign="top" style="width:80%;padding:0; margin:0; position:relative"><div id="tablaconedora" class="tablaconedora">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<tbody class="scrollContent">
<tr class="fondo-tr-col">
<th nowrap="nowrap">Cell Content 1</th>
<th nowrap="nowrap">Cell Content 2</th>
<th nowrap="nowrap">Cell Content 3</th>
<th nowrap="nowrap">Cell Content 4</th>
<th nowrap="nowrap">Cell Content 5</th>
<th nowrap="nowrap">Cell Content 6</th>
</tr>

<tr onmouseover="this.className='row-hover';" onmouseout="this.className='row-normal';">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 4</td>
<td>Cell Content 5</td>
<td>Cell Content 6</td>
</tr>
<tr onmouseover="this.className='row-hover';" onmouseout="this.className='row-normal';">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 4</td>
<td>Cell Content 5</td>
<td>Cell Content 6</td>

</tr>
<tr onmouseover="this.className='row-hover';" onmouseout="this.className='row-normal';">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 4</td>
<td>Cell Content 5</td>
<td>Cell Content 6</td>

</tr>
<tr onmouseover="this.className='row-hover';" onmouseout="this.className='row-normal';">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 4</td>
<td>Cell Content 5</td>
<td>Cell Content 6</td>
</tr>

</tbody>

</table>
</div></td>
</tr>
<tr>
<td width="87" class="borde-td-izq" ><strong>Motor</strong></td>
</tr>
<tr onmouseover="this.className='row-hover';" onmouseout="this.className='row-normal';">
<td width="87" class="borde-td-izq" ><strong>Potencia</strong></td>
</tr>
<tr onmouseover="this.className='row-hover';" onmouseout="this.className='row-normal';">
<td width="87" class="borde-td-izq" ><strong>Transmisi&oacute;n</strong></td>
</tr>
<tr onmouseover="this.className='row-hover';" onmouseout="this.className='row-normal';">
<td class="borde-td-izq"><strong>Precio</strong> (Ref.)</td>
</tr>
<tr>
<td class="borde-td-izq"></td>
</tr>
</table>
</td>

</tr>
</table>
</div>
Codigo css
Cita:
div.tablaconedora {
clear: both;
overflow-y: hidden;
overflow: auto;
width: 80%;
}
html>body div.tablaconedora {
overflow-y: hidden;
width: 90%
}

div.tablaconedora table {
float: left;
width: 740px
}

html>body div.tablaconedora table {
width: 100%
}

thead.fixedHeader tr {
position: relative
}
/
html>body thead.fixedHeader th {
display: block
}
/
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
color: #FFF;
display: block;
text-decoration: none;
width: 100%
}

thead.fixedHeader a:hover {
color: #FFF;
display: block;
text-decoration: underline;
width: 100%
}

html>body tbody.scrollContent {
display: block;
overflow: auto;
overflow-y:hidden ;
width: 100%
}
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
background: #EEE;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
html>body th.fixedHeader th {
width: 200px
}
html>body th.fixedHeader th + th {
width: 240px
}
html>body th.fixedHeader th + th + th {
width: 316px
}

html>body tbody.scrollContent td {
width: 150px
}
html>body tbody.scrollContent td + td {
width: 240px
}
html>body tbody.scrollContent td + td + td {
width: 300px
}
#tabla-columna {
border-collapse:collapse;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
border: 1px solid #DDDDDD;
overflow: hidden;
}
#tabla-columna .fondo-tr-col {
background-color: #D9E3F7;
}
#tabla-columna td {
margin: 0px;
height: 25px;
white-space:nowrap;
padding: 0px;
}
#tabla-columna th{
height: 25px;
white-space:nowrap;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #DDDDDD;
margin: 0px;
padding-left: 4px;
padding-right: 4px;
padding-top: 0px;
padding-bottom: 0px;
width: 87px;
}
#tabla-columna .borde-td-izq{
border-left-width: 1px;
border-left-style: solid;
border-left-color: #DDDDDD;
margin: 0px;
padding-left: 4px;
padding-right: 4px;
}
.cajatabla{margin-left:15px; margin-top:10px}
-->
</style>
el problema esta en que ahora me genera el scrol, pero la tabla interna no se acomoda por completo al td de la tabla madre.

ojalas me puedan ayudar, ya que he probado de muchas maneras y en i6 esto se ve fatal.

Última edición por naf; 25/10/2007 a las 11:51
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:31.