Compatibilité overlow:visible dans <table>

Je souhaire mettre en place un tableau composé de zone de saisie.
A l'init chaque zone est défini sur 1 ligne.
Quand on renseigne des caractères dans une cellule, une fois la limite atteinte sur la ligne, la zone de saisie augmente dynamiquement d'une ligne.

Voici mon code :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<table border="1" width="530"> <tr> <td><textarea cols="13" style="overflow:visible;"></textarea></td> <td><textarea cols="13" style="overflow:visible;"></textarea></td> <td><textarea cols="13" style="overflow:visible;"></textarea></td> <td><textarea cols="13" style="overflow:visible;"></textarea></td> </tr> <tr> <td><textarea cols="13" style="overflow:visible;"></textarea></td> <td><textarea cols="13" style="overflow:visible;"></textarea></td> <td><textarea cols="13" style="overflow:visible;"></textarea></td> <td><textarea cols="13" style="overflow:visible;"></textarea></td> </tr> </table>

---

Je travaille sous IE6 (contrainte technique).
Le code sous Firefox ou autre navigateur est je pense interprété différement.

Le textarea en dehors d'un tableau fonctionne correctement.

Mais dans mon tableau, je voudrais que la largeur de mes colonnes ne soit pas modifié à chaque entrée d'un caractère.


Merci

Quelqu'un a t-il reproduit mon bug?

Je pars sur une solution en utilisant position:absolute.

Voici mon code avec utilisation de position:absolute

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<table border="1" width="530"> <tr> <td><div style="height:20"><textarea rows="1" cols="13" style="position:absolute;overflow: visible"></textarea></div></td> <td><div style="height:20"><textarea rows="1" cols="13" style="position:absolute;overflow: visible"></textarea></div></td> <td><div style="height:20"><textarea rows="1" cols="13" style="position:absolute;overflow: visible"></textarea></div></td> <td><div style="height:20"><textarea rows="1" cols="13" style="position:absolute;overflow: visible"></textarea></div></td> </tr> <tr> <td><div style="height:20"><textarea rows="1" cols="13" style="position:absolute;overflow: visible"></textarea></div></td> <td><div style="height:20"><textarea rows="1" cols="13" style="position:absolute;overflow: visible"></textarea></div></td> <td><div style="height:20"><textarea rows="1" cols="13" style="position:absolute;overflow: visible"></textarea></div></td> <td><div style="height:20"><textarea rows="1" cols="13" style="position:absolute;overflow: visible"></textarea></div></td> </tr> </table>

---

J'obtiens un résultat pas convaincant étant donné que mes zone de saisies passes les unes sur les autres.

Il faudrait que la hauteur de mes <div> se calcul dynamiquement.

Est-ce possible?

Essaye de définir une largeur à tes textarea. Ensuite défini une hauteur minimum pour tes divisions de table (avec min-height:20px;). Mais je pense pas que IE6 interprète le min-height.

Et un petit conseil. Afin de gagné en performance, et en rapidité de développement, tu devrais externaliser tes styles dans une feuilles de style. Ça évitera les redondances et ça t'éviteras de modifier chaque ligne à la main. :)