ascenseur ou scroll uniquement sur une partie

ascenseur ou scroll uniquement sur une partie - HTML/CSS - Programmation

Marsh Posté le 05-05-2024 à 15:18:42    

Bonjour,

 

Je voudrais ajouter un ascenseur à une partie de mon fichier html qui ressemble dans les grandes lignes à ça :

 

<header>
</header>
<body>
        <table>
                 <thead>
                 </thead>
                 <tbody>
                      Partie que se remplit de ligne
                 </tbody>  
       </table>
</body>

 

Je veux que l'ascenseur donc n'apparaisse que dans le tbody.
J'ai essayé plusieurs trucs sans succès avec overflow dans le css et rien n'y fait, par exemple :

Code :
  1. * {
  2. ...
  3. overflow:hidden;
  4. }
  5. tbody {
  6. ...
  7. overflow-y:auto;
  8. }
 

Dans l'idéal, il faudrait un ascenseur pour cette partie, mais aussi un ascenseur global en réalité pour aller au footer. Donc ex. ci-dessus pas bon.
J'ai utilisé edge et firefox pour tester, même combat.
Une idée ?
Merci par avance

 


Message édité par lemime le 05-05-2024 à 15:21:18
Reply

Marsh Posté le 05-05-2024 à 15:18:42   

Reply

Marsh Posté le 05-05-2024 à 18:04:08    

Je ne penses pas que ce soit possible de le faire tel quel sur tbody, surtout sans lui "imposer" une hauteur inférieur à celle réel, car les tr pousseront forcement.
Mais il y'a tout un tas de technique pour rendre les données tabulaire plus "responsive", et donc leur ajouter des ascenseur verticaux et/ou horizontaux, parfois même en fixant la première ligne ou colonne mais la plus simple reste de le mettre dans un div ayant une hauteur défini, pour ton besoin un truc du genre :

Code :
  1. header, footer {text-align:center;background:#777;height:40px;font-size:30px;}
  2. div{height:calc(100vh - 80px);overflow:auto;}


 
Si tu veux creuser tu peux chercher un peu sur Google, j'ai vu ça en français : https://grafikart.fr/tutoriels/table-responsive-1015 (mais la technique du data label ajoute du js ou alourdit l'html, je suis pas très fan perso).


---------------
D3
Reply

Marsh Posté le 05-05-2024 à 20:14:23    

Merci pour ta réponse !
Je vais creuser

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed