Une page avec un tableau - recherche d'un code propre

Version imprimable

19/05/2017, 19h05
Pgs

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

Citation:

Envoyé par Pgs

dont tbody affiche en permance un scroll vertical et pas de scroll horizontal.

:salut:

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:

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>

20/05/2017, 12h04
Pgs
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
21/05/2017, 01h01
danielhagnoul
Citation:

Envoyé par Pgs

J'ai l'impression que cela oblige par contre à définir la largeur des colonnes,

Oui !
Citation:
Envoyé par Pgs

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.
21/05/2017, 08h04
Pgs

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