Adaptation des tableaux pour les appareils mobiles

À qui s'adresse cet article

Presque tous les concepteurs sont confrontés au problème de l'adaptation lors du rendu des tableaux dans les interfaces - à savoir, l'adaptation des tableaux pour les appareils mobiles. Il sera également juste de noter l'utilité de l'article pour les développeurs Frontend qui composent ces mêmes tableaux.

Problème

Le problème pour le concepteur commence au moment où le tableau de la version bureau de l'interface est adapté aux appareils mobiles. Comme nous le savons, les tableaux peuvent avoir de nombreuses colonnes, ce qui entraîne des plantages de tableau au-delà de la largeur de l'écran sur un appareil mobile. 

Ce problème est répandu, et il ne peut être aggravé que par le contenu de la cellule, qui n'est pas enveloppé ligne par ligne, augmentant ainsi la largeur de la colonne.

Jeu de données de test

Afin de mieux comprendre l'essence du problème, nous nous proposerons un tableau et nous l'adapterons.

Colonnes:

1. salle

   
   
   
   
   

2. Une photo

   
   
   
   
   

3. Nom complet

   
   
   
   
   

4. Téléphone

   
   
   
   
   

5. E-mail

   
   
   
   
   

6. la date

   
   
   
   
   

7. Description textuelle

   
   
   
   
   

8. Statut

   
   
   
   
   

9. Actions

   
   
   
   
   

Le résultat sera un tableau assez complet contenant tous les types de colonnes dont nous avons besoin. Franchement, même la liste ci-dessus soulève des questions pour moi - trop d'espace est gaspillé sur la droite. 

1. Largeur fixe et enroulement de ligne

   
   
   
   
   

2. Largeur au contenu

   
   
   
   
   

“ ”.

. , . — , .

— .

1. 
   
   
   
   

2. 
   
   
   
   

3. 
   
   
   
   

1. 
   
   
   
   

2. 
   
   
   
   

- , .

: , . ( )

, . . .

, . , , . .

-

- , , , , .

- - , - ( ).

, , , ( ).

Si vous remarquez des erreurs ou si vous avez quelque chose à ajouter, faites-le moi savoir, je le ferai certainement. Merci pour l'attention!