Un guide pour implémenter une mise en page de tableau réactive à l'aide de CSS

Guide pour implémenter une mise en page de tableau réactive à l'aide de CSS

Introduction :
Avec la popularité des appareils mobiles, la conception Web moderne s'est débarrassée des limitations de la mise en page fixe et s'est tournée vers la mise en page réactive. La mise en page réactive permet aux pages Web de s'adapter automatiquement aux différents appareils et d'offrir une meilleure expérience utilisateur. Dans cet article, nous présenterons comment utiliser CSS pour implémenter une mise en page de tableau réactive, avec des exemples de code spécifiques.

1. Définissez le style de base :
   Afin que la table s'adapte automatiquement aux différents appareils, vous devez d'abord définir le style de base. Habituellement, nous définirons le conteneur parent du tableau sur un positionnement relatif et définirons l'élément du tableau sur un pourcentage de largeur pour s'adapter aux différentes tailles d'écran.

.container {
  position: relative;
}

table {
  width: 100%;
}

2. Configurez une disposition de tableau réactive :
   Dans une disposition de tableau traditionnelle, les colonnes du tableau s'enroulent automatiquement lorsque l'écran devient plus étroit. Mais en mise en page réactive, pour offrir une meilleure lisibilité et une meilleure expérience utilisateur sur des écrans plus petits, nous pouvons convertir le tableau en disposition verticale. De cette façon, chaque cellule occupera sa propre ligne et s’alignera verticalement à mesure que l’écran se rétrécira. Pour y parvenir, nous pouvons utiliser la requête @media de CSS pour détecter la largeur de l'écran et la styliser différemment selon les besoins.

@media screen and (max-width: 600px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  tr {
    margin-bottom: 10px;
  }

  th,
  td {
    display: inline-block;
  }

  th {
    font-weight: bold;
  }
}

Dans le code ci-dessus, nous utilisons la requête @media pour définir le style lorsque la largeur de l'écran est inférieure ou égale à 600px. Dans ce cas, nous définissons l'attribut d'affichage des éléments liés au tableau sur block afin qu'ils soient disposés verticalement. Dans le même temps, nous définissons l'attribut d'affichage des cellules de l'en-tête et du corps du tableau sur inline-block afin qu'elles soient disposées horizontalement.

3. Définir les détails du style du tableau :
   En plus de la mise en page réactive de base, vous pouvez améliorer encore l'expérience utilisateur en ajustant la taille de la police, la hauteur des lignes et les marges des cellules du tableau. En fonction de la largeur de l'écran de l'appareil, la taille de la police peut être augmentée ou diminuée pour garantir la lisibilité.

@media screen and (max-width: 600px) {
  /* Other styles */
  
  th,
  td {
    font-size: 14px;
    line-height: 1.5;
    padding: 5px;
  }
}

Dans le code ci-dessus, nous définissons la taille de la police, la hauteur de ligne et la marge de cellule lorsque la largeur de l'écran est inférieure ou égale à 600px dans la requête @media. Vous pouvez l'ajuster selon vos besoins.

Conclusion :
Avec l'exemple de code CSS ci-dessus, nous pouvons facilement implémenter une disposition de tableau réactive. De cette manière, que l'utilisateur utilise un téléphone mobile, une tablette ou un ordinateur, le formulaire peut s'adapter automatiquement aux différents appareils et offrir une meilleure expérience utilisateur. J'espère que cet article pourra vous être utile.

Références :

• https://css-tricks.com/accessible-simple-responsive-tables/
• https://www.w3schools.com/howto/howto_css_responsive_table.asp

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!