Tableau HTML défilable avec la ligne du haut et la colonne de gauche figées

Est-ce que quelqu'un a été capable d'implémenter un tableau défilant en HTML où les colonnes TOP et GAUCHE sont figées, mais le reste de la table est défilable? Un exemple parfait de ceci est: Google Squared Tableau HTML défilable avec la ligne du haut et la colonne de gauche figées

J'ai essayé de désosser le code pour la table de google au carré, mais j'ai échoué jusqu'ici.

Note: J'ai besoin de la possibilité de GELER la RANGÉE SUPÉRIEURE et la COLONNE GAUCHE en même temps.

Source

2009-07-08 Jon

Le lien est rompu. Pouvez-vous en fournir un nouveau, parce que je suis vraiment curieux de savoir quelle est la valeur pratique d'une telle table. –

Il y a un exemple de travail à http://ajaxian.com/archives/freeze-pane-functionality qui devrait être facile à reproduire. Soyez sûr de noter les commentaires - de nombreux utilisateurs ont fait des suggestions utiles pour améliorer le script.

Pour la demande de Nirk, un lien direct vers la démo active est à http://www.disconova.com/open_source/files/freezepanes.htm.

Source

2009-07-08 23:06:07 anschauung

Quelqu'un at-il trouvé une meilleure façon de le faire? Je travaille avec des jeux de données ÉNORMES et donc les tables contiennent beaucoup de données, le clonage des données jusqu'à 4 fois est tout simplement pas aller au travail. Est-ce que jQuery a des méthodes pour atteindre ce but? –

Je ai lié à l'article intentionnellement - les commentaires ont fourni beaucoup d'améliorations utiles que l'affiche devrait envisager, IMO. – anschauung

-1

Si vous utilisez jQuery, il y a beaucoup de plugins pour les tables à tête fixe.

Source

2009-07-08 22:25:09 usoban

Go avec une structure de base comme this-

table 
    row 
    column (blank) 
    column 
     table (1 row high, column headers) 
    row 
    column 
     table (1 column wide, row headers) 
    column 
     div (fixed height & width, overflow auto) 
     table (actual data)

Définir une table mise en page fixe et spécifier la largeur des colonnes en pixels explicitement. Vous devriez être capable de réaliser le même effet.

Source

2009-07-08 22:39:48

Que se passe-t-il si vous voulez que le contenu de la cellule détermine les dimensions de la cellule (c'est-à-dire utilise la disposition de table par défaut)? – allyourcode

-1

Vous devez Scrollable (plugin jQuery)

Demo is here

Source

2009-07-08 22:57:01 Thinker

démo a été brisé dans mon navigateur (chrome) – tfwright

J'ai une version de cette utilisation (pour un affichage de style Gantt-chart).

utilise 3 tables: 1 pour la colonne de gauche (les lignes), 1 pour le haut (colonnes), puis les données.

vous devez travailler dur pour que les cellules correspondent aux tailles avec celles auxquelles elles correspondent ( table layout-fixed peut aider à atteindre cet objectif).

Les tables sont ensuite placées dans certaines divs; les divs gauche et supérieur ont (comme suggéré ci-dessus) hauteur & largeur et overflow-auto dans leur css.

Vous puis accrochez un peu de javascript pour synchroniser le défilement de gauche/haut divs avec l'intérieure ...

Si je me souviens qu'il y avait un peu juste de la « malédiction et essayer de nouveau », mais cela peut être fait avec un minimum de js.

hth

Source

2009-08-22 09:07:48 realcals

Tableau HTML défilable avec la ligne du haut et la colonne de gauche figées

Répondre

Questions connexes