mode IE7 squishing contenu d'en-tête de table à gauche sur plusieurs lignes

Question

J'ai un exemple d'une table que je suis en train de générer ici:

http://jsfiddle.net/DTsxa/

Je rencontre des difficultés avec l'en-tête de table si lorsque la table est affichée avec Internet Exploder en mode IE7 ou en mode de compatibilité IE8. Le texte "Chiffres de performance du fonds au 19 novembre 2010" devrait être sur une seule ligne, mais il est écrasé dans la gauche sur plusieurs lignes.

Je pensais que white-space: nowrap; (comme dans l'exemple ci-dessous) aurait pu corriger cela, mais il n'a aucun effet du tout.

<tr> 
    <th class="TableHeaderRow" colspan="8">This Fund's Performance Figures as at 1 December 2010</th> 
</tr> 

avec ce CSS:

th.TableHeaderRow 
{ 
    background-color: #A4A247; 
    padding: 10px 5px; 
    font-weight:bold; 

    white-space: nowrap; 
} 

Quelqu'un peut voir un travail autour de cette question?

Answer 1

votre problème semble être ici:

.PerformanceTable th 
{ 
    width: 50px; 
    border-left: solid 1px #00573D; 
    border-top: solid 1px #00573D; 

    /*background-color: #FFF; 
    color: #00573D;*/ 
    vertical-align: top; 


    /*height:28px;*/ 
} 

IE accepte votre largeur: 50px et le forcer à être plus court. En supprimant cette ligne, cela m'a semblé correct. A essayer!

Answer 2

Essayez d'utiliser "white-space: pre;". Cela semble fonctionner mieux que nowrap.