Champs gelés dans les tables html

Question

J'ai passé toute la journée à regarder cela et j'ai finalement décidé de demander de l'aide. Cela ressemble à une question très similaire à beaucoup ici mais aucune des réponses acceptées ne se rapproche de ce dont j'ai besoin. Si je me trompe, je serais reconnaissant d'un pointeur dans la bonne direction.

Mon problème est que j'ai une table de 20 lignes (maximum) et 18 colonnes. Les colonnes ont une variété de types de contenu - texte, options, boutons radio ...

La largeur de la table est beaucoup plus grande que ce qui peut être affiché et doit donc défiler horizontalement. J'ai besoin que les 4 premières colonnes soient toujours visibles et les 14 autres à défiler.

Un problème supplémentaire est que les utilisateurs finaux de cette table l'afficheront dans un iFrame, dont je n'ai aucun contrôle sur les dimensions.

J'ai trouvé quelques malheureusement, ne conviennent pas, des morceaux de code: www.shrutigupta.com/index.php/2005/12/12/how-to-create-table-with-first-column-frozen/ (les lignes ne sont pas alignées bien)

acatalept.com/common/test/fixed-table.html (mieux que je peux dire, est de 3 tables)

Et, l'un des regards plus prometteur mais sans code: apex.oracle.com/pls/otn/f?p=11630:2:1883191096360711

Dans tous les cas, si vous redimensionnez votre fenêtre de sorte que la hauteur est inférieure à la hauteur de la table, vous devez faire défiler la fenêtre vers le bas afin de trouver la barre de défilement pour faire défiler la table horizontalement.

Ce que nous avons vraiment besoin, et la seule chose que nous pouvons vraiment utiliser est exactement la méthode utilisée à: www.google.com/squared/search?q=world+leaders Si vous redimensionnez la fenêtre sur cette page , la barre de défilement apparaîtra en bas pour seulement les colonnes qui en ont besoin.

S'il vous plaît, aidez, ce projet me rend fou!

Answer 1

utilisation défilement css pour trop-plein pour lequel jamais colonnes doivent être défilée et d'autres être caché

Essayez de mettre la table ou tds l'intérieur div et appliquer le style pour trop-plein

Answer 2

<table width="100%"> 
<tr> 
<td id="200px">some fixed content</td> 
<td> 
     <table> 
      create rows and table inside this table 
     </table> 
</td> 
</tr> 

</table> 

Answer 3

DataTables est maintenant supportant ColVis, qui vous permet d'afficher/masquer les colonnes ainsi que les en-têtes fixes/colonnes fixes. Ce n'est pas le défilement que vous cherchez nécessairement, mais peut-être une solution plus élégante à votre problème. Avec la quantité de données à traiter, vous pouvez également tirer parti du tri, du filtrage et de la pagination pour faciliter la consommation de l'utilisateur final.