1493 sujets

Web Mobile et responsive web design

Table responsive

Bonjour à tous
Une fois n'est pas coutume, j'ai une "vraie" table à afficher et je ne sais pas comment la rendre responsive. Il s'agit de la table des membres d'une chorale
La structure de la table est la suivante :

<table>
    <caption>titre</caption>
    <tbody class="pupitre">
        <tr>                                   
                <!-- la première ligne contient le nom du pupitre
                        + le premier membre du pupitre -->
             <th rowspan="...">nom du pupitre</th>
             <td>nom du membre</td>
              <td>prénom</td>
              <td>téléphone</td>
              <td>adresse mail</td>
          </tr>
          <tr>...</tr>  <!-- une ligne par membre sans <th> -->
          ........
     </tbody>
    <tbody class="pupitre">
        ........
    </tbody>
    ..............................
</table>

Si la largeur d'écran diminue, je réduis la taille des caractères par @media query jusqu'à une taille minimum de 12px.
Au dessous de cette taille, il faut changer la présentation pour ne pas avoir à scroller horizontalement cette table.

J'en conclus (mobile first) que je dois plutôt faire l'équivalent de ma table sous la forme -- par exemple -- d'une <section>
Je suppose que ce genre de situation doit être commun.
Pouvez vous me dire comment vous gérez ce genre de situation?
Par exemple faut il considérer en pratique que <table> est obsolète?
Merci de vos conseils.
Je te remercie pour ces exemples, notamment le premier qui me semble très astucieux.
Je vais regarde si je peux en faire quelque chose dans mon cas particulier.
Comme mon tableau est généré par Javascript à partir d’une structure de données construite en PHP par extraction de base de données, je peux générer ce qui m’arrange, y compris — comme je l’ai fait ailleurs — une <table> ET une <section> en montrant l’une et en cachant l’autre par @media.
Modifié par PapyJP (05 Dec 2021 - 19:37)
Il y a quelques années, j'avais fait ceci HTML et CSS uniquement : Tables

Ça c'est pour la démo, car il y a quelques coquilles. Le code CSS mis à jour, mais sans démo en ligne, est celui-ci :
Github

Tout le secret est dans les meta data placés dans le html et dont l'affichage est géré via CSS :
<table class="table">
   <thead>
      <tr>
         <th>User</th>
         <th>First Name</th>
         <th>Last Name</th>
         <th>Email</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <td></td>
         <td>Foot</td>
         <td>Foot</td>
         <td>Foot</td>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <th data-thead="User">1</th>
         <td data-thead="First Name :">Vincent</td>
         <td data-thead="Last Name :">de Paul</td>
         <td data-thead="Email :">vincentdepaul@gmail.com</td>
      </tr>
      <tr>
         <th data-thead="User">2</th>
         <td data-thead="First Name :">Frédéric</td>
         <td data-thead="Last Name :">Ozanam</td>
         <td data-thead="Email :">fredericOzanam@gmail.com</td>
      </tr>
      <tr>
         <th data-thead="User">3</th>
         <td data-thead="First Name :">Martin</td>
         <td data-thead="Last Name :">de Porrès</td>
         <td data-thead="Email :">martin.o.p.@gmail.com</td>
      </tr>
   </tbody>
</table>


Le secret de l'affichage en CSS est ici :
.table tbody th::before,
.table tbody td::before {
    content: attr(data-thead) ' ';
}

Modifié par Olivier C (06 Dec 2021 - 20:30)
Sujet clos
Aller à