El foro de Diseño en el nuevo capítulo de 120"

Retroceder   Foros del Web > Diseño de Sitios web > CSS
Actualizar esta página Scroll dentro de una tabla y 1 columna fija, con css...
Registrarse Ayuda Miembros Buscar Temas de Hoy Marcar Foros Como Leídos

Respuesta
 
Herramientas Desplegado
Antiguo 18-oct-2007, 16:14   #1 (permalink)
naf
naf ha deshabilitado el karma
 
Fecha de Ingreso: agosto-2007
Ubicación: Chile
Mensajes: 20
Enviar un mensaje por MSN a naf
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-oct-2007 a las 06:10.
naf está desconectado   Responder Citando
Antiguo 19-oct-2007, 00:39   #2 (permalink)
Moderata
JavierB es realmente agradableJavierB es realmente agradableJavierB es realmente agradableJavierB es realmente agradableJavierB es realmente agradableJavierB es realmente agradable
 
Avatar de JavierB
 
Fecha de Ingreso: noviembre-2002
Ubicación: Madrid
Mensajes: 19.895
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,
__________________
Lee las Políticas de los foros y escribe correctamente.
JavierB está desconectado   Responder Citando
Antiguo 25-oct-2007, 10:38   #3 (permalink)
naf
naf ha deshabilitado el karma
 
Fecha de Ingreso: agosto-2007
Ubicación: Chile
Mensajes: 20
Enviar un mensaje por MSN a naf
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-oct-2007 a las 10:51.
naf está desconectado   Responder Citando
Respuesta

No hay votos aún.


« Tema Anterior | Próximo Tema »
Herramientas
Desplegado
Mode Lineal Mode Lineal

Normas de Publicación
No puedes crear nuevos temas
No puedes responder temas
No puedes subir archivos adjuntos
No puedes editar tus mensajes
BB code is Activado
Caritas están Activado
[IMG] está Activado
Código HTML está Desactivado


La Zona horaria es GMT -6. Ahora son las 03:36.

Contáctenos - Foros del Web - Archivo - Arriba

Message Board Statistics

LinkBacks Enabled by vBSEO 3.1.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93