Estaba experimentando un poco con la intención de elaborar una sencilla tabla o parrilla de datos. Un datagrid, para que todos nos entendamos.
Hoy he estado estudiando como implementar un sistema de columnas redimensionables, ya sea para empequeñecerlas o para agrandarlas, pero me he encontrado con problemas en Opera. Como meter todo eso aquí sería un verdadero caos, he creado un ejemplo muchísimo más sencillo donde se reproduce idéntico error. El código es bien simple:
Código:
<!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> <script type="text/javascript"> <!-- function init () { document.getElementById ("button").onclick = function (_e) { var td1 = document.getElementById ("table").rows [0].cells [0]; var td2 = document.getElementById ("table").rows [0].cells [1]; td1.style ["width"] = (td1.offsetWidth - 10) + "px"; td2.style ["width"] = (td2.offsetWidth + 10) + "px"; } } --> </script> </head> <body onload="init (event);"> <br /><br /> <table id="table" style="border-spacing: 0px; border-collapse: collapse;"> <tr> <td style="width: 200px; background-color: #ff0000; padding: 0px;">1</td> <td style="width: 200px; background-color: #ffcc00; padding: 0px;">2</td> <td style="width: 200px; background-color: #ff0000; padding: 0px;">3</td> </tr> </table> <br /> <button id="button">Click!</button> </body> </html>
Los atributos CSS que uso en tabla y celdas son sencillamente para eliminar dimensiones "ocultas" que pudieran afectar al buen funcionamiento de la propiedad "offsetWidth". Todo ello sería equivalente a usar ciertos atributos HTML ya en desuso en XHTML, como "cellspacing" o "cellpadding".
Este script funciona bien en Mozilla Firefox 2 (testado en la v. 2.0.0.12) y en Internet Explorer 7. La celda amarilla va ganando espacio a la celda roja izquierda de 10 en 10 píxeles, sin que el tamaño de la celda roja derecha o de la tabla se vea afectado.
Pues el problema es que en Opera parece que las celdas no pueden disminuir su anchura, sólo ampliarlo. He probado con las v. 9.25 y 9.26 y en ambas falla. Sólo varía la celda amarilla.
He probado a forzar la anchura de la tabla imponiéndole mediante CSS un valor de 600px, pero sigue fallando (aunque el comportamiento es bien distinto). También he probado a forzar el tamaño de la última celda a 200px, con idéntico resultado.
¿Alguien tiene alguna idea de la razón por la que se produce este problema tan curioso?
Muchas gracias ;) .