Comment congeler ligne d'en-tête de tableau HTML?

Je suis en utilisant un tableau HTML et les ont appliquées de défilement verticale et maintenant j'ai envie de geler la ligne d'en-tête pendant le défilement. Comment puis-je faire cela?

  • Pensez Javascript.
  • La Question pourrait être posée de façon plus générale. voir ce post.
  • Gelé en-têtes de tableau est une fonctionnalité qui HTML doit ajouter qu'un seul attribut. Cette question ne cesse de s'demandé partout et il suce que la seule façon de le faire est par la création de certains laid hack ou le téléchargement d'un plugin qui a le plus de lignes de code que ce que le reste du projet, combinée a.
  • Essayez cette stackoverflow.com/a/25902860/5123803 vous pouvez résoudre en quatre lignes
InformationsquelleAutor laxmi | 2011-06-28
  1. 5

    HTML:

    <table>
 <tr id="header-row">
  <th>header col 1</th>
  <th>header col 2</th>
 </tr>
 <tr>
  <td>data</td>
  <td>data</td>
 <tr>
 <tr>...</tr>
 ...
</table>

    CSS:

    #header-row { position:fixed; top:0; left:0; }
table {padding-top:15px; }
    • Quand j'ai essayé de donner du style à tbody sa ne fonctionne pas.Je ne suis pas aller défiler uniquement .
    • son travail pour moi. mais la largeur de la th changé 🙁 comment faire pour corriger cela?
    InformationsquelleAutor David Andersson
  2. 4

    Un moyen facile est de créer 2 tables et de fixer la largeur d'une colonne.
    La première loi sur la Tête

    Le bas de la seconde table est l'endroit où la barre de défilement est présent et que des données.

    • Mes lignes de la table le contenu sera affiché dynamiquement, donc quand j'ai essayé avec deux tables de u comme suggéré pour les différentes données tbody lignes avec diffèrent et il semble inadéquation entre la table en-tête et le corps de la table
    • essayez d'utiliser le CSS pour les deux, qui seront pris en charge
    • Je n'aime pas cette solution. Je me demande si il y a une autre façon...
    • Pensé que c'était une solution élégante, mais les en-têtes ne sont pas alignés sur les colonnes ou les fermer même, hélas!
    InformationsquelleAutor gmhk
  3. 1

    pour l'avenir de chercher une solution pour la création d'une table avec un blocage de l'en-tête de colonne:

    Voici le css pour les principaux PortfolioList div, puis le partie en-tête:

    <style type="text/css">
    div.PortfolioList  
    {   /* bkgrnd color is set in Site.css, overflow makes it scrollable */
        height:500px; width:680px; position: static;  overflow-y:auto; float:left;                             
    }
    div.PortfolioList_hdr
    {   /* this div used as a fixed column header above the porfolio table, so we set bkgrnd color here */
        background-color:#7ac0da; height:45px; width:680px; position: static;  float:left;                             
    }    
</style>

    Maintenant, voici les tables dans les deux divs mentionnés ci-dessus:

        <div class="PortfolioList_hdr">
       <table id="pftable_hdr">
        <caption>Portfolio Definitions</caption>
        <thead>
            <tr>
             <th>Pf Id</th><th>Name</th><th>Exp Type</th><th>Date</th><th>Term</th><th>Exposure</th>                    
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<div class="PortfolioList">
    <table id="pftable">
        <tbody>
        </tbody>
    </table>
</div>

    J'ai utilisé jQuery pour ajouter le et le et remplit le contenu en conséquence.

    J'espère que cela aide...

    • Bob
    InformationsquelleAutor bob.mazzo
  4. 1

    Découvrez ce plugin jQuery. Il permet de figer la colonne et de fixer l'en-tête, comme tu le voulais.

    http://gridviewscroll.aspcity.idv.tw/

    InformationsquelleAutor user3215480
  5. -1

    Cela semble de travail en FF.

    <table >  
    <thead><tr><th>This is my header</th></tr></thead>
    <tbody style="max-height:100px; overflow-y:auto; display:block">
        <tr>
            <td>col1</td>
        </tr>
        <tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr>
    </tbody>
</table>
    • Quand j'ai essayé de donner du style à tbody sa ne fonctionne pas.Je ne suis pas aller défiler uniquement .
    • J'ai mis à jour ma réponse avec des exemples de code. S'il vous plaît essayer de le tester et de me le faire savoir.
    • Cela ne fonctionne pas bien sous IE. Projapati, si vous voulez dire que vous aurez probablement besoin d'un peu de javascript pour elle.
    • Cela ne fonctionne pas dans firefox avec 2 colonnes: jsfiddle.net/CpYCJ/1
    • Cette solution n'a pas vraiment de mérite, même sur firefox car il ne supporte qu'une seule colonne, si votre cas d'utilisation, a une seule colonne, alors vous n'êtes pas confronté à des données tabulaires, et il serait beaucoup mieux d'utiliser <div> éléments au lieu d'un <table> qui aurait donné la même chose que cela fonctionnera sur tous les navigateurs, au lieu de simplement firefox. Je suis downvoting parce que le poste est trompeuse, et pourrait donner à quelqu'un espoir qu'il y est un moyen facile de soutenir un fixe en-tête de tableau dans firefox sans l'aide de 2 tables.
    InformationsquelleAutor kheya