Mauvais rendu des cellules de tableau avec Google Chrome/Webkit

Question

Sur le code suivant, COL1A et COL3A ne sont pas à 50% de hauteur avec Chrome ou Webkit. Cela fonctionne bien avec IE7 et Firefox.

<table border="1"> 
    <tr> 
    <td height="100%">COL 1A</td> 
    <td rowspan="2">COL 2</td> 
    <td>COL 3A</td> 
    <td rowspan="2"> 
     COL 4<br/> 
     COL 4<br/> 
     COL 4<br/> 
     COL 4<br/> 
     COL 4<br/> 
     COL 4<br/> 
     COL 4<br/> 
     COL 4<br/> 
    </td> 
    </tr> 
    <tr> 
    <td height="100%">COL 1B</td> 
    <td>COL 3B</td> 
    </tr> 
</table> 

Demo: http://dl.dropbox.com/u/255810/Jalios/Demo/TableChrome/table2.html

J'ai essayé de régler différentes hauteurs (sur TR ou TD). J'ai aussi essayé de définir une image avec un remplissage ou une marge ... mais rien ne fonctionne.

Est-ce un bogue de Chrome? Y a-t-il un tour de table ou des conseils?

Answer 1

semble être un problème dans webkit. J'ai les mêmes problèmes avec Chrome et Safari. Apparaît lorsque vous avez des lignes de hauteur spécifique, sauf certaines au centre. Juste le dernier sera upscaled s'il y a une autre colonne avec rowspan plus haut. en horizontal ce problème n'apparaît pas.

Vous devez utiliser une autre table au sein d'une seule cellule dans Col. 1 et 3 et éviter rowspan

<table border="1"> 
<tr><td><table height=100%><tr><td height="100%">COL 1A</td></tr> 
       <tr><td height="100%">COL 1B</td></tr> 
     </table></td> 
<td><td>COL 2</td> 
<td>COL 3A</td> 
<td> 
    COL 4<br/> 
    COL 4<br/> 
    COL 4<br/> 
... 

De plus, vous devez gérer les frontières de la table interne en utilisant css

Answer 2

Pour td, l'attribut height ne fait pas partie de la définition stricte , seulement dans de transition, peut-être WebKit ne met pas. Essayez d'utiliser CSS.

Modifier: Pas de chance avec CSS, soit. Peut-être que vous devrez utiliser une ligne par ligne, alors vous pouvez utiliser les attributs rowspan pour générer des cellules avec 50% de hauteur.