1. #1
    Pgs
    Pgs est déconnecté
    Membre régulier
    Profil pro
    Inscrit en
    avril 2004
    Messages
    358
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 358
    Points : 85
    Points
    85

    Par défaut Une page avec un tableau - recherche d'un code propre

    Bonjour,
    Je galère avec les width et height.
    Pour partir sur de bonnes bases, quelqu'un aurait-il l'amabilité de me communiquer le code minimum htlm/css pour une page contenant un tableau :
    * qui prend 50% de la fenêtre de l'explorateur avec un minimum de 500px (les colonnes doivent utiliser la totalité de la largeur du tableau)
    * qui prend 60% de la hauteur de l'écran avec un minimum de 300px
    * dont thead est fixe
    * dont tbody affiche en permance un scroll vertical et pas de scroll horizontal.

    Merci d'avance, car je tourne en rond depuis des heures (sinon plus...).

    Philippe

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 677
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 677
    Points : 20 983
    Points
    20 983
    Billets dans le blog
    38

    Par défaut

    Citation Envoyé par Pgs Voir le message
    dont tbody affiche en permance un scroll vertical et pas de scroll horizontal.


    Cette exigence impose un format de table inhabituel qui est incompatible avec les autres.

    Pour tester mon exemple, il suffit de copier-coller le code ci-dessous dans une nouvelle page web.

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
      <meta http-equiv="cache-control" content="public, max-age=60">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
      <meta name="author" content="Daniel Hagnoul">
      <title>test</title>
      <style>
        * {
          box-sizing: border-box;
        }
        
        table { /* largeur et hauteur fixée par th et td */
          margin: auto;
          border: 1pt solid grey;
          border-spacing: 0;
        }
        tbody,
        thead tr {
          display: block; /* important */
        }
        tbody {
          height: 10rem; /* hauteur fixe inférieure au contenu indispensable */
          overflow-y: scroll;
          overflow-x: hidden;
        }
        tbody td,
        thead th {
          width: 10rem;
          border: 1pt solid grey;
          padding: 0.3rem;
        }
        thead th:last-child {
          width: 11rem; /* 10 + 1 pour scroll */
          border: 1pt solid grey;
        }
      </style>
      <script>
        'use strict';
        
        document.addEventListener( "DOMContentLoaded", ev => {
          
        }, false );
        
        window.addEventListener( "load", ev => {
     
        }, false );
      </script>
    </head>
    <body>
     
      <table>
        <thead>
          <tr>
            <th>head1</th>
            <th>head2</th>
            <th>head3</th>
            <th>head4</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>content1</td>
            <td>content2</td>
            <td>content3</td>
            <td>content4</td>
          </tr>
          <tr>
            <td>content1</td>
            <td>content2</td>
            <td>content3</td>
            <td>content4</td>
          </tr>
          <tr>
            <td>content1</td>
            <td>content2</td>
            <td>content3</td>
            <td>content4</td>
          </tr>
          <tr>
            <td>content1</td>
            <td>content2</td>
            <td>content3</td>
            <td>content4</td>
          </tr>
          <tr>
            <td>content1</td>
            <td>content2</td>
            <td>content3</td>
            <td>content4</td>
          </tr>
          <tr>
            <td>content1</td>
            <td>content2</td>
            <td>content3</td>
            <td>content4</td>
          </tr>
          <tr>
            <td>content1</td>
            <td>content2</td>
            <td>content3</td>
            <td>content4</td>
          </tr>
          <tr>
            <td>content1</td>
            <td>content2</td>
            <td>content3</td>
            <td>content4</td>
          </tr>
          <tr>
            <td>content1</td>
            <td>content2</td>
            <td>content3</td>
            <td>content4</td>
          </tr>
          <tr>
            <td>content1</td>
            <td>content2</td>
            <td>content3</td>
            <td>content4</td>
          </tr>
          <tr>
            <td>content1</td>
            <td>content2</td>
            <td>content3</td>
            <td>content4</td>
          </tr>
          <tr>
            <td>content1</td>
            <td>content2</td>
            <td>content3</td>
            <td>content4</td>
          </tr>
        </tbody>
        </tfoot>
      </table>
     
    </body>
    </html>

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Pgs
    Pgs est déconnecté
    Membre régulier
    Profil pro
    Inscrit en
    avril 2004
    Messages
    358
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 358
    Points : 85
    Points
    85

    Par défaut

    Merci beaucoup Daniel,
    Je commence à mieux comprendre.
    Auparavant, je me reposais sur table-layout: fixed et je ne me posais pas de question concernant les largeurs des colonnes.
    J'ai découvert cette semaine l'utilisation de thead et tbody.
    J'ai l'impression que cela oblige par contre à définir la largeur des colonnes, sinon elles s'ajustent au contenu.
    C'est bien ça ?

    Il reste un point qui me pose problème :
    • si je définis le height de tbody à 15rem, c'est ok
    • mais si je le définis à 90%, cette valeur n'est pas prise en compte

    Or, je voudrais que mon tableau exploite 90% de la hauteur de la fenêtre (tout respectant une valeur minimum fixe, par exemple 15rem).
    Comment faire ?
    Merci

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 677
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 677
    Points : 20 983
    Points
    20 983
    Billets dans le blog
    38

    Par défaut

    Citation Envoyé par Pgs Voir le message
    J'ai l'impression que cela oblige par contre à définir la largeur des colonnes,
    Oui !

    Citation Envoyé par Pgs Voir le message
    • si je définis le height de tbody à 15rem, c'est ok
    • mais si je le définis à 90%, cette valeur n'est pas prise en compte
    Normal, comme dit dans le message précédent, c'est un format de table inhabituel, tbody est en display block.

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Pgs
    Pgs est déconnecté
    Membre régulier
    Profil pro
    Inscrit en
    avril 2004
    Messages
    358
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 358
    Points : 85
    Points
    85

    Par défaut

    Ok. Y a-t-il une astuce pour remédier à cela ?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Tableau SAS sur une page avec proc report
    Par Kirata dans le forum ODS et reporting
    Réponses: 4
    Dernier message: 16/03/2012, 17h06
  2. [HTML] Charger une page dans un tableau? Possible?
    Par mec.nimois dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 17/10/2005, 11h32
  3. Réponses: 2
    Dernier message: 11/08/2005, 14h44
  4. Réponses: 13
    Dernier message: 16/04/2004, 12h00
  5. Récupérer le code HTML d'une page avec Delphi 7
    Par PsyKroPack dans le forum Web & réseau
    Réponses: 5
    Dernier message: 06/02/2003, 21h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo