Le défilement Horizontal sur le tableau avec en-tête fixe

J'ai créé un en-tête fixe à l'aide de CSS (essentiellement de la définition de la position de la thead fixe), mais le problème que j'ai exécuté si l'utilisateur résolution de la taille ou de la taille de la fenêtre est plus petite que la taille des tables, j'ai besoin d'ajouter une barre de défilement horizontale de sorte qu'ils peuvent tout voir. j'ai essayé de réglage de dépassement de capacité à auto et de défilement, mais seulement quand j'ai faites défiler vers le bas de la page, la barre de défilement apparaît. Aussi j'ai besoin d'être en mesure d'avoir le thead faites défiler jusqu'à la table. Toutes les suggestions sur la barre de défilement horizontale apparaît si la fenêtre est plus petite que la taille des tables de et comment avoir le thead encore être fixé dans une position, mais encore de défilement pour voir plus de la thead si la taille de la fenêtre est trop petite?

http://jsfiddle.net/E9mqk/1/

Le code HTML est:

<div class="table-wrapper">
<table id="table-information">
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <thead class="table-fixed-header" id="table-data">
        <tr>
            <th>Something 1</th>
            <th>Something 2</th>
            <th>Something 3</th>
            <th>Something 4</th>
            <th>Something 5</th>
            <th>Something 6</th>
            <th>Something 7</th>
            <th>Something 8</th>
        </tr>
    </thead>
    <tbody class="table-body">   
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>
</div>

Et le CSS est:

.table-wrapper {
    overflow-x: scroll;
}
.table-fixed-header {
    position: fixed;
}
#table-information tbody:before {
    line-height: 30px;
    content:"-";
    color:white; /* to hide text */
    display:block;
}
#table-information td {
    max-width: 100px;
    min-width: 100px;
}
#table-information th {
    max-width: 100px;
    min-width: 100px;
}
Fournir un jsFiddle expliquant le problème ne sera pas d'une grande aide ..
C'est une mauvaise utilisation de la balise colgroup. Ce tableau structurellement ne contient qu'une seule colgroup avec huit col éléments. developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup developer.mozilla.org/en-US/docs/Web/HTML/Element/col

OriginalL'auteur user1399078 | 2013-03-20

  1. 1

    En supposant que vous ne faites pas quelque chose en Javascript qui produit un comportement étrange sur les tables, vous pouvez juste envelopper de la table dans une 

     <div style="overflow-x: scroll;">
   [your table here]
 </div>

    ou quelque autre élément de bloc avec le même style, et vous aurez obtenir le comportement que vous cherchez, y compris la tête et le corps de défilement le long de l'un à l'autre -- voir cette jsfiddle pour un exemple.

    Bien sûr, si votre problème n'est pas que vous ne pouvez pas obtenir une barre de défilement apparaissent, mais plutôt que vous ne pouvez pas obtenir la barre de défilement pour afficher n'importe où sauf en dessous de la table, qui change les choses -- meilleurs conseils sur ce qui serait, Javascript, mettre un height et max-height sur le div conteneur qui sont moins de l'utilisateur de la fenêtre.innerHeight, et aussi de mettre overflow-y: scroll; sur le div conteneur, de sorte que l'utilisateur peut faire défiler dans les deux directions à la vue de tous de la table. Pas vraiment une bonne solution, je vous l'accorde; si possible, je recommanderais de faire quelque chose de complètement différent, mais si vous ne pouvez pas, cela peut arriver.
    Ouais, j'ai vu que la barre de défilement ne seront visibles en tout temps, c'est quand je régler la hauteur de la div conteneur à être plus petite que la taille de la fenêtre. J'ai donc peut-être à faire quelque chose en utilisant js. Des idées sur l'en-tête fixe? Pour obtenir que pour faire défiler avec le tableau?
    Vous ne devriez pas avoir à faire quelque chose de spécial pour obtenir le thead pour faire défiler avec la table -- le thead vit à l'intérieur de l'élément de la table, donc si vous êtes défilement d'un conteneur autour de la table, il faut ramener le thead avec elle, comme avec la tbody. Pouvez-vous poster un lien vers un exemple de ce que vous travaillez avec, pour que je puisse voir ce qu'il se passe?
    J'ai ajouté le jsfiddle. Comme vous pouvez le voir, le corps des parchemins, mais pas l'en-tête.
    Pourquoi avez-vous besoin de la position: fixed; sur la table d'en-tête? Retrait il permet à l'en-tête pour faire défiler avec le corps, et je ne suis pas sûr de comment il pourrait faire pour l'avoir en premier lieu. J'ai édité le jsfiddle en conséquence; jetez un oeil et laissez-moi savoir si cela résout le problème.

    OriginalL'auteur Aaron Miller