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

[naf]

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.

[JavierB]

Hola naf

Mira este enlace:

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

Saludos,

[naf]

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.

<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

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.