Problème de largeur relative de la table colspan dans Internet Explorer

J'utilise des tables pour générer des graphiques horizontaux simples (pour une mise à l'échelle facile). J'utilise le colspanning pour obtenir un chevauchement exact (parfois les cellules se chevauchent, mais pas dans cet exemple).Problème de largeur relative de la table colspan dans Internet Explorer

Mon problème est que IE (8) rend les largeurs de cellules relatives erronées. Je sais qu'une cellule ne peut pas être plus petite que son contenu, mais ce n'est pas le problème ici. Par exemple, la cellule "X 65" dans l'exemple devient plus large que 47% dans IE. Firefox se porte bien cependant.

Voici l'exemple:

<html> 
<body> 

<style> 
table.CompAnalysisTable { 
    border-width: 1px; 
    border-spacing: 0px; 
    border-style: solid; 
    border-color: black; 
    border-collapse: collapse; 
    background-color: white; 
    font-size:8px; 
} 

table.CompAnalysisTable td { 
    border-width: 1px; 
    border-style: solid; 
    border-color: black; 
} 

table.CompAnalysisTable td table 
{ 
    border-style:none; 
} 
</style> 

<table> 
<tr> 
<td> 
</td> 
<td class="nobr" valign="middle" align="left">Graph</td> 
<td valign="middle" width="100%" align="right">Total 73</td> 
</tr> 
</tbody> 
</table> 

<table class="CompAnalysisTable" width="100%" cellpadding="0" cellspacing="0"> 
<tbody> 
<tr> 
<td class="nobr" style="width: 47%; background-color: rgb(172, 172, 255);" colspan="65">X&nbsp;65</td> 
<td class="nobr" style="width: 47%; background-color: white;" colspan="65"></td> 
<td class="nobr" style="width: 5%; background-color: rgb(172, 172, 255);" colspan="7">A&nbsp;7</td> 
<td class="nobr" style="width: 1%; background-color: rgb(172, 172, 255);">B&nbsp;1</td> 
</tr> 
<tr> 
<td class="nobr" style="width: 47%; background-color: white;" colspan="65"></td> 
<td class="nobr" style="width: 52%; background-color: rgb(255, 152, 152);" colspan="72">A&nbsp;72</td> 
<td class="nobr" style="width: 1%; background-color: rgb(255, 152, 152);">B&nbsp;1</td> 
</tr> 
</table> 


</body> 
</html>

J'ai essayé d'autres techniques comme divs et des tables séparées pour chaque rangée, mais colspanning a été la seule technique pour obtenir exactement le chevauchement.

Une autre solution consiste à rendre des images sur le serveur, mais ensuite je perds la mise à l'échelle et cela prend beaucoup de temps.

Toute aide est très appréciée.

Source

2009-08-31 Anonymous

Un en-tête comme cela vous évitera la peine de le fixer pour IE 8 en l'ayant rendu comme IE 7:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Autre que vous pouvez essayer de voir ce qu'il est que IE 8 est faire et corriger cela avec une condition HTML spécifique:

<!--[if IE 8]><![endif]-->

Je souhaite que je pourrais aider plus, mais je n'ai pas IE 8 Je ne peux pas voir le problème.
Peut-être que ces liens peuvent aider:

HTML conditions
Beyond Doctypes

Source

2009-09-05 04:22:59 Tom

J'ai eu le même problème que vous ... Ma solution est d'utiliser javascript branché (avec Jquery bien sûr ;-)) code pour fixer le Largeurs TD ...

Quelque chose d'inutile aussi, si vous voulez une largeur à 100%, définissez sa largeur à 10 000px!

Même problème sous IE, Google Chrome & Safari

Source

2010-01-29 16:58:01 eBuildy

Problème de largeur relative de la table colspan dans Internet Explorer

Répondre

Questions connexes