Taille d'une cellule varie en fonction de l'épaisseur de sa bordure

Bonjour,

Dans le cadre d'un projet perso j'utilise un tableau tout ce qu'il y a de plus simple avec une ligne et deux colonne.

<table style="width:100%; border-collapse:collapse;">
  <tr>
    <td class="left" style="height:20px; border-right: 1px solid black"></td>
    <td class="right" style="height:20px; border-left: 1px solid black"></td>
  </tr>
</table>

Mais le résultat est vraiment super bizarre !

je vous propose de copier le code et de faire un test dans votre navigateur favoris et de faire varier la taille des bordures des deux colonnes entre 1 et 3px.
La taille des cellules varient en fonction de l'épaisseur de leurs bordures.
Moi j'aimerai des colonnes de même dimension en fonction de la taille du parent.

Si quelqu'un a une explication je veux bien !!
Merci d'avance !!
Modifié par Spawny (22 Mar 2012 - 18:36)

Bonsoir, je n'ai pas compris le pourquoi du comment, mais soit Oo
Tu peux donner à tes cellules une width de 50%, ça semble fonctionner.

Edit : Autant pour moi, ça ne fonctionne pas quand je remplis les cellules...
Modifié par Gothor (22 Mar 2012 - 18:59)

Merci de ta réponse.
Comme solution j'ai mis 2px pour les deux bordures, de cette manière les deux colonnes sont de la même taille. Je voulais pouvoir choisir entre 1px et 3px mais finalement j'ai l'impression que ça ne sera pas possible.

Je suis tjs à la recherche de quelqu'un ayant la solution ou au moins l'explication à cet étonnant problème !

C'est la première fois que j'ai l'impression de bosser sur IE6 en étant sur chrome et FF ^^

Bonjour,
Je ne sais pas pourquoi, mais cela fonctionne quand je sépare le css et le html et en mettant une taille de 50% sur les cellules.

http://jsfiddle.net/Gothor/aeeXJ/1/