Foros del Web - Ver Mensaje Individual

IsaBelM · #8 (**permalink**) 08/06/2012, 07:52

juraría que había posteado el código, con algunas de las nuevas especificaciones, en el tema de html hace días. esta cabeza mia

mi intención no era emular una hoja de calculo, por cierto nunca he visto ninguna. mi intención era crear un código minimalista que cualquier usuario pudiera manejar igual que se maneja una tabla normal. con un ancho a la tabla y a cada celda de la primera fila

le he añadido tu modificación y además ahora el alto de las celdas de la columna derecha, se adaptan al alto de las celdas con datos tabulados.

podríamos plantearnos como hacer que el ancho del header y del cuerpo se ajustaran a la celda que tuviese un ancho mayor. ya veremos si hay ganas de hacerlo

en verde está marcada las partes editables

Cita:

<!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=utf-8" />
<title></title>
<style type="text/css">
#table-scroll {
width: 300px;
height: 100px;
overflow: auto;
}

table, td, th {
border: #c1c1c1 1px solid;
vertical-align: top;
}

#fixedY{
width: 500px; /* suma ancho de las celdas */
position: relative;
top: 0;
z-index: 99;
}

#fixedY table{
border-collapse: collapse;
}

#fixedY table th.fixedYth {
background-color: red;
font: bold 15px Tahoma, Geneva, sans-serif;
color: #fff;
}

#cuerpoDatos {
width: 500px; /* suma ancho de las celdas */
}

#cuerpoDatos > div{
float: left;
}

#cuerpoDatos > div#fixedX{
position: relative;
left: 0;
z-index: 98;
background-color: yellow;
}

#cuerpoDatos > div#fixedX table{
border-collapse: collapse;
}

#cuerpoDatos > div#fixedX table td.fixedXtd{
vertical-align: middle;
}

#cuerpoDatos > div#nofixedX table{
border-collapse: collapse;
}

#corner{
font: bold 15px/120% Tahoma, Geneva, sans-serif;
text-align: center;
border: #c1c1c1 1px solid;
background-color: orange;
position: fixed;
z-index: 999;
}
</style>
<script type="text/javascript">
function fnc() {

var verticalTDfixed = document.querySelectorAll('.fixedXtd');
var largoFila = document.querySelectorAll('.nofixedXtd');
var anchoColumna = document.querySelectorAll('.fixedYth');
var anchoColumna2 = document.querySelectorAll('.ancho');

// ancho celda fixed superior derecha
document.getElementById('corner').style.width = parseInt(document.querySelector('.fixedXtd').offse tWidth +3) + 'px';

if(anchoColumna[0].offsetWidth >= verticalTDfixed[0].offsetWidth) {
// ancho primera columna
document.getElementById('fixedX').style.width = anchoColumna[0].offsetWidth + 'px';
verticalTDfixed[0].style.width = anchoColumna[0].offsetWidth + 'px';

// ancho tabla con datos tabulados
document.getElementById('nofixedX').style.width = parseInt(document.querySelector('#cuerpoDatos').of fsetWidth - anchoColumna[0].offsetWidth) + 'px';

} else {

// ancho primera columna
anchoColumna[0].style.width = verticalTDfixed[0].offsetWidth -3 + 'px';

// ancho tabla con datos tabulados
document.getElementById('nofixedX').style.width = parseInt(document.querySelector('#cuerpoDatos').of fsetWidth - anchoColumna[0].offsetWidth-1) + 'px';
}

// ancho td con datos tabulados
var n = 1;
for(var i = 0; i < anchoColumna2.length; i++) {
anchoColumna2[i].style.width = anchoColumna[n].offsetWidth -3 + 'px';
n++;
}

// largo de cada fila con datos tabulados
for(var i = 0; i < verticalTDfixed.length; i++) {
if(navigator.userAgent.indexOf('MSIE') != -1 || navigator.userAgent.indexOf('AppleWebKit') != -1) { // ie, chrome, safari
verticalTDfixed[i].style.height = largoFila[i].offsetHeight -3 + 'px';
} else {
verticalTDfixed[i].style.height = largoFila[i].offsetHeight + 'px'; // ff, opera
}
}

// "fijamos" los bloques al hacer scroll
document.getElementById('table-scroll').onscroll = function() {
document.getElementById('fixedY').style.top = document.getElementById('table-scroll').scrollTop + 'px';
document.getElementById('fixedX').style.left = document.getElementById('table-scroll').scrollLeft + 'px';
};

}

window.onload = fnc;
</script>
</head>
<body>

<div id="table-scroll">

<div id="corner"> ☺ </div>

<div id="fixedY">
<table>
<thead>
<tr>
<th class="fixedYth" style="width:50px">Lote</th><th class="fixedYth" style="width:220px">Producto 1</th><th class="fixedYth" style="width:100px">Producto 2</th class="fixedYth"><th class="fixedYth" style="width:130px">Producto 3</th>
</tr>
</thead>
</table>
</div>

<div id="cuerpoDatos">

<div id="fixedX">
<table>
<tbody>
<tr>
<td class="fixedXtd">Viaje 1</td>
</tr>
<tr>
<td class="fixedXtd">Viaje 2</td>
</tr>
<tr>
<td class="fixedXtd">Viaje 3</td>
</tr>
<tr>
<td class="fixedXtd">Viaje 4</td>
</tr>
<tr>
<td class="fixedXtd">Viaje 5</td>
</tr>
<tr>
<td class="fixedXtd">Viaje 6</td>
</tr>
<tr>
<td class="fixedXtd">Viaje 7</td>
</tr>
<tr>
<td class="fixedXtd">Viaje 8</td>
</tr>
<tr>
<td class="fixedXtd">Viaje 9</td>
</tr>
</tbody>
</table>
</div>

<div id="nofixedX">
<table>
<tbody>
<tr>
<td class="nofixedXtd ancho">moto un largo mayor que las demás filas</td><td class="ancho">avión</td><td class="ancho">barco</td>
</tr>
<tr>
<td class="nofixedXtd">moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td class="nofixedXtd">moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td class="nofixedXtd">moto</td><td>avión también vamos a alargarlo</td><td>barco</td>
</tr>
<tr>
<td class="nofixedXtd">moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td class="nofixedXtd">moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td class="nofixedXtd">moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td class="nofixedXtd">moto</td><td>avión</td><td>barco</td>
</tr>
<tr>
<td class="nofixedXtd">moto</td><td>avión</td><td>barco</td>
</tr>
</tbody>
</table>
</div>

</div>

</div>

</body>
</html>

pd: al final ha salido otro medio engendro