Partage
  • Partager sur Facebook
  • Partager sur Twitter

Fixer la hauteur des cellules d'un tableau

PierrePetitjean
    3 juillet 2020 à 8:08:06

    Bonjour à tous,

    Je bloque sur un problème et je n'ai pas trouvé de solutions sur le web pour le résoudre.

    Je souhaiterais

    (1) éviter l'élargissement par le haut/bas des cellules de mon tableau même lorsqu'elles contiennent un texte long

    et

    (2) ne mettre une scrollbar verticale qu'en cas de nécessité

    La propriété table-layout semble faire le travail demandé de manière horizontale pour (1) et (2) mais il me semble (je souhaiterais que non) qu'il n'existe pas de propriétés semblables pour le faire verticalement.

    Pour (1), j'ai tenté de définir un height et un max-height (ainsi que de changer la valeur par défaut de box-sizing) mais sans succès.

    Pour (2), j'ai ajouté overflow-y:scroll, mais la scrollbar s'affiche quelqque soit le contenu des cellules.

    Je partage le code en espérant que quelqu'un puisse m'aider.

    Bien à vous.

    <!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> titre </TITLE>
<META charset="UTF-8">
</HEAD>
<STYLE>
table {
border:medium solid #000;
border-collapse:collapse;
text-align:center;
table-layout:fixed; 
width:100%;
td,th {
font-size:smaller;
line-height:1;
border:thin solid #000;
height:1.2rem;
max-height:1.2rem;
overflow-y:scroll;
vertical-align:middle;
}
caption {
margin:1% 0% 2%;
}
</STYLE>
<BODY>
<TABLE>
<caption> Légende </caption>
<thead>
<TR>
<TH></TH>
<TH></TH>
<TH></TH>
<TH></TH>
<TH></TH>
<TH></TH>
<TH></TH>
<TH></TH>
</thead>
<tbody>
</TR>
<TR>
<TH></TH>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TH></TH>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TH></TH>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TH></TH>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TH></TH>
<TD></TD>
<TD>jhbvvhyccccbjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjv<br>fygfyfyufy</TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TH></TH>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TH></TH>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TH></TH>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TH></TH>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TH></TH>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TH></TH>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TH></TH>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TH></TH>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TH></TH>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TH></TH>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TH></TH>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>



    -
    Edité par PierrePetitjean 3 juillet 2020 à 8:34:25

    • Partager sur Facebook
    • Partager sur Twitter
    Nyut
      3 juillet 2020 à 13:16:29

      Bonjour,

      Déjà une erreur qui m'a sauté aux yeux c'est que ta balise <style> doit être dans le <head>

      Après quel est le but de ce tableau. Tu peux pas faire des blocs div

      • Partager sur Facebook
      • Partager sur Twitter

      arf !!!

      PierrePetitjean
        3 juillet 2020 à 17:17:25

        Merci de ta réponse Nyut,

        J'ai bien changé la place de ma balise <style>.

        Après, je voudrais simplement que la taille de toutes mes cellules soit toutes de la même taille et fixes verticalement et horizontalement quelque soit la taille de mon texte, et que dans le cas où le texte prend trop de place pour tenir verticalement, et seulement dans ce cas, une scrollbar permette de le faire défiler.

        Edit: il me semble avoir réussi avec l'aide de Nyut et de ce lien (https://www.it-swarm.dev/fr/html/comment-definir-la-hauteur-maximale-pour-table-cellule/1070414985/), même s'il semble daté. Par contre, je ne sais pas comment mettre la scrollbar verticale qu'en cas de nécessité (il semblerait que cela soit impossible : https://developer.mozilla.org/fr/docs/Web/CSS/overflow-y)

        <!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Approche pratique des vitamines </TITLE>
<META charset="UTF-8">
</HEAD>
<STYLE>
table {
width:100%;
border:medium solid #000;
table-layout:fixed; 
border-collapse:collapse;
text-align:center;
<!--pkoi width 12,5% dans td,th ne fonctionne pas? // impact ordre syntaxe CSS? ex: ce commentaire entre t-l et width pb! t-l tjs avt width?-->
}
td,th {
font-size:smaller;
line-height:1;
border:thin solid #000;
vertical-align:middle;
height:1.5rem;
}
div{
max-height:1.5rem;
overflow-y:scroll;
scrollbar-width:thin;
/* % ne marche pas car height tale non def
* commentaires ici <! et/ou /*?
*/
}
caption {
margin:1% 0% 2%;
}
</STYLE>
<BODY>
<!--thead tbody sans tfoot : grave? Balise en maj. ou min. incidence 'efficacité...?-->
<TABLE>
<caption>Approche pratique des vitamines</caption>
<thead>
<TR>
<TH>Vitamine</TH>
<TH>Cat&eacutegorie</TH>
<TH>Mol&eacutecule</TH>
<TH>R&ocircle</TH>
<TH>Besoin</TH>
<TH>Source</TH>
<TH>Carence</TH>
<TH>Exc&egraves</TH>
</thead>
<tbody>
</TR>
<TR>
<th><div>fr</div></th>
<td><div>fr<br>fr</div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</TR>
<TR>
<th><div></div></th>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</TR>
<TR>
<th><div></div></th>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</TR>
<TR>
<th><div></div></th>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</TR>
<TR>
<th><div></div></th>
<td><div></div></td>
<td><div>jhbvvhy<br>cccjjjjj<br>jyufy</div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</TR>
<TR>
<th><div></div></th>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</TR>
<TR>
<th><div></div></th>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</TR>
<TR>
<th><div></div></th>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</TR>
<TR>
<th><div></div></th>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</TR>
<TR>
<th><div></div></th>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</TR>
<TR>
<th><div></div></th>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</TR>
<TR>
<th><div></div></th>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</TR>
<TR>
<th><div></div></th>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</TR>
<TR>
<th><div></div></th>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</TR>
<TR>
<th><div></div></th>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</TR>
<TR>
<th><div></div></th>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>



        -
        Edité par PierrePetitjean 3 juillet 2020 à 18:32:24

        • Partager sur Facebook
        • Partager sur Twitter
        Nyut
          6 juillet 2020 à 15:39:20

          Bonjour,

          Je n'arrive quand même pas a voir l'histoire du tableau.

          Un truc comme ca, ca ne pourrait pas fonctionner

          <!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Approche pratique des vitamines </TITLE>
<META charset="UTF-8">
</HEAD>
<STYLE>
  .bloc {height: 40px;width: 200px;overflow-y: scroll;}
</STYLE>
<BODY>
<!--thead tbody sans tfoot : grave? Balise en maj. ou min. incidence 'efficacité...?-->
<div class="bloc">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
  </div>
</BODY>
</HTML>



          • Partager sur Facebook
          • Partager sur Twitter

          arf !!!

          Fixer la hauteur des cellules d'un tableau

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur ●
          • Markdown