Problème pour faire défiler tbody sur IE 9 (tbody hauteur = hauteur de la ligne)

Désolé pour mon mauvais anglais, j'espère que vous allez comprendre ce que je veux dire...

Je suis en train de mettre en œuvre un tableau HTML qui charge le défilement de la table des organismes indépendamment de l'en-tête du tableau.

J'ai trouvé la question suivante qui m'a beaucoup aidé :
Comment faire défiler la table "tbody" indépendant "thead"?

J'ai testé le code suivant, il fonctionne sur Chrome (22), Firefox (16) et l'Opéra (12) sans problème :

HTML :

<table>
  <thead>
   <tr>
    <th>Title1</th>
    <th>Title2</th>
    <!-- ... -->
   </tr>
  </thead>
  <tbody>
   <tr>
     <td>...</td>
     <td>...</td>
     <!-- ... -->
   </tr>
   <!-- ... -->
  </tbody>
</table>

CSS :

thead, tbody {
    display: block;
}

tbody {
    height:500px;
    overflow-y:auto;
    overflow-x:hidden;
}

thead {
    line-height: 20px;
}

De sorte qu'il fonctionne sur les principaux navigateurs sauf IE 9, sur IE, j'ai quelques questions :

  • La tbody la hauteur n'est pas définie (donc je n'ai pas de barre de défilement)
  • Chacun a une hauteur de 500px (la tbody de la hauteur sur les autres navigateurs)

Les deux exemples suivants ont exactement les mêmes questions : http://jsfiddle.net/nyCKE/2/ , http://www.imaputz.com/cssStuff/bigFourVersion.html

J'ai vu la question suivante (et la réponse), mais il ne m'aide pas : IE9 + css : problème fixe avec en-tête de tableau

Donc je suis sûr que le bug vient de IE mais je n'ai aucune idée de comment résoudre ce problème sans changer ma structure HTML.

Avoir quelqu'un à une idée ?

OriginalL'auteur Dorian | 2012-10-11

  1. 5

    J'ai légèrement essayé de le réparer. Espérons qu'il donne une certaine idée

    HTML

    <div class="wrap">
    <div class="inner">
        <table>
            <thead><tr>
                <th><p>Problem</p></th>
                <th><p>Solution</p></th>
        </tr>               
            </thead>            
            <tbody>              
            </tbody>
        </table>
    </div>
</div>​

    CSS

    p {margin:0 0 1em}
table p {margin :0}
.wrap {
    margin:50px 0 0 2%;
    float:left;
    position:relative;
    height:200px;
    overflow:hidden;
    padding:25px 0 0;
    border:1px solid #000;
width:150px
}
.inner {
    padding:0 ; 
    height:200px;
    overflow:auto;
}    
table {  margin:0 0 0 -1px; border-collapse:collapse; width:130px}
td {
    padding:5px;
    border:1px solid #000;
    text-align:center;    
}
thead th {
    font-weight:bold;
    text-align:center;
    border:1px solid #000;
    padding:0 ;    
    color:#000;
}
thead th {border:none;}
thead tr p {  position:absolute;   top:0;    }
.last { padding-right:15px!important; }​

    Démo http://jsfiddle.net/nyCKE/272/

    Merci!!!! Il fonctionne, il y a une seule question. Avec cette solution, seul le <p> sur <th> est visible lorsque nous défiler. Mais j'ai de voir le style de mon <th> trop (parce que j'utilise tableSorter plugin), j'ai donc mis le absolute valeur sur mon <th> directement, et j'ai mis mon left propriété CSS avec une fonction jQuery. Il n'est pas parfait (car il utilise Javascript et je pense qu'il ne fonctionne pas sans border-collapse:collapse), mais il fonctionne sur IE, j'espère que ce bug sera corrigé bientôt.

    OriginalL'auteur Sowmya

  2. 0

    Voici une brève réponse qui vous permet de faire défiler la table avec un en-tête fixe dans ie9.

    Ajouter une condition div autour de la table

    <!--[if lte IE 9]>
<div class="old_ie_wrapper">
<!--<![endif]-->
<table>
...
<!--[if lte IE 9]>
</div>
<!--<![endif]-->

    Ajouter les styles suivants pour ie9

        .old_ie_wrapper {
        height: 500px;
        overflow: auto;
    }

        .old_ie_wrapper tbody {
            height: auto;
        }

        .old_ie_wrapper thead tr {
            position: absolute;
        }

        .old_ie_wrapper tbody tr:first-child {
            height: 67px;
            vertical-align: bottom;
        }

    Vous aurez à régler les hauteurs, et probablement d'autres propriétés basé sur votre table.

    OriginalL'auteur ykay