Comment "verrouiller" des colonnes dans un tableau HTML?

Je retire une grande quantité de données tabulaires que je souhaite afficher à l'aide d'une table. Le seul inconvénient est que je voudrais pouvoir "verrouiller" quelques-unes des colonnes (fname/lname/email) de sorte que lorsque les utilisateurs défilent horizontalement, ces colonnes restent toujours "verrouillées" et visibles. J'ai déjà fait quelque chose de similaire avant, mais c'était à l'époque des framesets, donc cette approche n'est plus valide.Comment "verrouiller" des colonnes dans un tableau HTML?

Je pensais à faire quelque chose d'intelligent avec la pose de tables les unes sur les autres, mais jusqu'à présent, je n'ai pas réussi à faire ce travail. Quelqu'un at-il des suggestions intelligentes?

Un parfait exemple de ce que je suis en train de faire est ici: http://www.google.com/squared/search?q=world+leaders

Source

2009-10-16 Nicholas Kreidberg

Vous pouvez utiliser une iframe, mais il est une IME douleur royale en vérifiant que les en-têtes de colonnes sont de la même taille que les données réelles ... –

cette question connexe trouvé http://stackoverflow.com/questions/1100835/scrollable-html-table-avec-top-row-et-left-column-frozen –

Ahh c'est exactement ce que je cherche, merci d'avoir signalé ce post! –

Si je comprends bien ce que vous voulez, vous pouvez avoir un conteneur div avec position: relative, overflow: auto et la largeur fixe. A l'intérieur, vous séparez la partie que vous voulez verrouiller, de l'autre, en disant, deux divs différents. La div contenant la partie "verrouillée" devrait avoir la position: absolue et gauche: 0.

C'est juste la grande image mais vous devriez être capable d'accomplir ce que vous voulez de cette façon.

Source

2009-10-16 18:15:46 treznik

J'ai fait la même chose dans le passé à la main et cela a très bien fonctionné - DataTables (jQuery plugin) le fera automatiquement pour vous avec cette extension qui rend la vie un peu plus facile! http://datatables.net/extras/fixedcolumns/ – bUKaneer

Existe-t-il un moyen de le faire sans Javascript, par ex. CSS pur? – lanoxx

Le code ci-dessous devrait être assez explicite. Vous pouvez ajouter/supprimer des lignes de TBODY pendant que THEAD reste parfaitement statique. C'est ce que TBODY et THEAD existent pour;)

<style type="text/css" media="screen"> 
    .myTable 
    { 
    border:1px solid #000; 
    border-spacing:0px; 
    width:300px 
    } 

    .myTable thead td 
    { 
    background-color:#000; 
    color:#FFF; 
    } 

    .myTable tbody 
    { 
    height:300px; 
    overflow-y:auto; 
    overflow-x:hidden; 
    } 
</style> 

<table class="myTable"> 
    <thead> 
    <tr> 
     <td>Fname</td> 
     <td>Lname</td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Lior</td> 
     <td>Cohen</td> 
    </tr> 
    <tr> 
     <td>Lior</td> 
     <td>Cohen</td> 
    </tr> 
    <!-- put more rows here --> 
    </tbody> 
</table>

Source

2009-10-16 18:16:27

Je suis un peu confus, comment garder les choses "verrouillées" en place? Je vais avoir plusieurs articles dont j'ai besoin en mais je ne veux que quelques-uns d'entre eux (dans le but de cet exemple laisse juste dire l'un d'entre eux, donc prénom) pour rester "verrouillé". Exemple du monde réel = http://www.google.com/squared/search?q=world+leaders - remarquez comment les noms ne bougent jamais. –

Désolé, j'ai mal compris votre problème alors. Je pensais que vous vouliez dire une table avec une rangée d'en-têtes statiques et un contenu de corps défilant. Je mettrai à jour ce post tmw avec une solution qui couvre aussi une colonne verrouillée à gauche (à moins que vous n'ayez plus besoin d'une réponse puisque vous en avez déjà une). –

Non, en fait, j'ai toujours besoin d'une solution, je n'ai toujours rien trouvé, je suis content. –

Quelque chose comme cela devrait fonctionner:

Vous allez devoir jouer avec un peu afin que vous n'avez pas la barre de défilement horizontale Eh bien, mais vous avez l'idée.

Bien sûr, cela ne fonctionnait pas dans IE7. Cela peut fonctionner en 8, mais comme toujours YMMV. Bonne chance. J'espère que cela vous permet de commencer dans la bonne direction.

<html> 
    <head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     var body = $('#table-body'); 
     for (var i = 0; i < 100; i++) { 
      var row = $('<tr />'); 
      var fname = $('<td />') 
      .text('FirstName' + i); 
      var lname = $('<td />') 
      .text('LastName' + i); 
      var email = $('<td />') 
      .text('FirstLast' + i + '@example.com'); 
      row 
      .append(fname) 
      .append(lname) 
      .append(email); 
      body.append(row) 
     } 
     }); 
    </script> 
    <style type="text/css"> 
     #table-body { 
     height: 150px; 
     overflow: auto; 
     } 
    </style> 
    </head> 
    <body> 
    <table> 
     <thead> 
     <td>First Name</td> 
     <td>Last Name</td> 
     <td>Email</td> 
     <thead> 
     <tbody id="table-body"> 
     </tbody> 
    </table> 
    </body> 
</html>

Source

2009-10-16 18:33:09

Comment "verrouiller" des colonnes dans un tableau HTML?

Répondre

Questions connexes