Désactiver la structure de table

Question

J'ai une application web complète avec l'utilisation de beaucoup de tables imbriquées. Cette application fonctionne très bien pour la version de bureau/vue.

Je suis en train de l'installer pour la vue mobile. Ce qui est presque terminé, MAIS:

J'utilise JSP et Java pour, par exemple, récupérer les résultats de la recherche. Tous ces éléments sont affichés dans une rangée à la fois. Je ne suis pas en mesure de faire correspondre cette rangée sur un écran mobile, donc ce que je cherche est une fonction JavaScript pour désactiver l'outil de table, et juste afficher les colonnes les unes sous les autres, par exemple. - comparable à Opera Mini MOBILE VIEW, qui avec le clic d'un bouton fait correspondre à n'importe quelle taille d'écran. Mon application Web fonctionne correctement, à l'exception de certaines tables, telles que les résultats de recherche. Je ne veux pas changer le JSP, ne pas créer de nouvelles pages - ce serait trop de travail! Tout ce que je veux, c'est inclure un certain fichier JavaScript si l'utilisateur connecté vient via un appareil de poche (qui fonctionne) et désactiver les tables, ou le faire correspondre correctement à l'écran !!

J'espère que quelqu'un est capable de trouver une solution, j'ai tout essayé avec CSS, et quelques bits JavaScript (que je ne connais pas si bien) J'ai deux fichiers CSS séparés, en fonction du support que vous utilisez avec, il choisit le bon.

MAIS COMMENT OBTENIR LE DÉBORDEMENT DE LA TABLE/que les données seront bien affichées, sans avoir à faire défiler gauche et droite sur un petit appareil, qui comme vous le savez très ennuyeux;)!?!?!?

Meilleures salutations ALEX

Answer 1

Essayez d'utiliser une feuille de style alternatif:

tr{display:block;} 
td{display:inline-block;} 

... cela devrait permettre aux cellules de flotter à l'intérieur de leur ligne parent.

Exemple: http://jsfiddle.net/doktormolle/nu62m/