Ver Mensaje Individual
  #3 (permalink)  
Antiguo 25/10/2007, 10:38
naf
 
Fecha de Ingreso: agosto-2007
Ubicación: Chile
Mensajes: 23
Antigüedad: 17 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 10:51