Thead fixe sur première ligne lors d'un scroll

**rlelamer** · 25/06/2018, 19h38

Bonsoir,
J'ai une dernière "amélioration" que j'aimerais mettre en oeuvre, je souhaiterais que thead soit fixe lors d'un scroll vers le bas et que le scroll se fasse sur tout le reste de la popup.

popup.html

Code :

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
body {
    font-size: 11px;
    margin: 5px;
}
 
.table-wrap {
    border: 1px solid black;
}
 
.table-wrap table {
    text-align: center;
    width: 100%;
}
 
.table-wrap table th, .table-wrap table td {
    border: 1px solid black;
    padding: 1px;
    white-space: nowrap;
}
 
tr:hover td {
     background-color: lightgray;
}
 
tr {
     background-color: white;
}
 
#localtimeDiv {
    float: left;
}
 
#versionDiv {
    float: right;
}
 
#gpxDiv {
    margin: 0 auto;
    text-align: center;
}
 
.cssButton {
    font-size: 11px;
}
 
#gpxOutput {
    width: calc(100% - 5px);
    resize: none;
    font-size: 11px;
}

popup.html

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
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="popup.css">
    </head>
    <body>
        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Time</th>
                        <th title="Timezone">TZ</th>
                        <th>Position</th>
                        <th title="Time To Waypoint">TTW</th>
                        <th title="Distance To Waypoint">DTW</th>
                        <th title="Distance To Go">DTG</th>
                        <th title="True Wind Direction">TWD</th>
                        <th title="True Wind Speed">TWS</th>
                        <th title="True Wind Angle">TWA</th>
                        <th title="Bearing To Waypoint - Heading">BTW</th>
                        <th>Sail</th>
                        <th title="Speed Through Water - Boat speed">STW</th>
                        <th title="Average True Wind Angle">ATWA</th>
                        <th title="Average Bearing To Waypoint">ABTW</th>
                    </tr>
                </thead>
                <tbody id="pointsTable" align="center">
                </tbody>
            </table>
        </div>
        <br>
        <div id="localtimeDiv">
            <input type="checkbox" id="localtime" tabindex="-1">
            <label>Local Time</label>
        </div>
        <div id="versionDiv">
            <label>Version</label>
            <label id="version"></label>
        </div>
        <div id="gpxDiv">
            <input class="cssButton" type="button" id="gpxExport" value=".GPX" tabindex="-1">
        </div>
        <br>
        <textarea id="gpxOutput" rows="2" readonly tabindex="-1">...::: Click on GPX button for generate file :::...
Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
    </body>
    <script src="bundle.js"></script>
</html>

J'ai fais quelques essais (qui ne fonctionnent pas évidement ...) du genre

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.table-wrap table thead {
   position: fixed;
}

Comment vous mettriez ça en place ?

Merci

Invité · 25/06/2018, 20h45

Bonjour,

La question à déjà été posée maintes fois.
La reponse déjà donnée aussi.

"table entête fixe"

**rlelamer** · 25/06/2018, 21h23

ok j'vais regarder si je trouve ma réponse
merci

**rlelamer** · 25/06/2018, 23h55

Bon bah j'ai lu et relu des tas de façons différentes et retour a la case départ ça fonctionne pas
Souvent dans les codes que j'ai trouvé, width est défini ainsi que height sauf que je ne peux pas les définir vu que ça évolue a chaque fois ...
la seule chose que j'ai compris au final c'est ça :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.table-wrap table thead {
    display: block;
}
 
.table-wrap table tbody {
    display: block;
    overflow-y: scroll;
}

d'ailleurs ce code rends scrollable uniquement les valeurs du tableau ? les 3 div et le textarea ne sont pas pris en compte ?

**rlelamer** · 26/06/2018, 12h47

Un petit coup de pouce serait le bienvenu, je suis pas contre me creuser la tête pour obtenir ce que je souhaite, je souhaiterais juste être guider pour y arriver.

Faut il aller dans le sens de cet exemple ?

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
<style>
#ministres thead {
        display:block;
}
#ministres tbody {
        display:block;
        height:5em; /* 5 times the equivalent of a text "size". */
        overflow-y:scroll;
}
 
        #ministres thead tr th:nth-child(1) { /* column 1 ! */
                width:5em;
        }
        #ministres thead tr th:nth-child(2) { /* column 2 */
                width:10em;
        }
        #ministres tbody tr:first-child td:nth-child(1) { /* column 1 ! */
                width:5em;
        }
        #ministres tbody tr:first-child td:nth-child(2) { /* column 2 */
                width:10em;
        }
</style>
<table id="ministres" border="1">
	<thead>
		<tr><th>Nom</th><th>Ministère</th></tr>
	</thead>
	<tbody>
		<tr><td>JM Ayrault</td><td>Premier</td></tr>
		<tr><td>L Fabius</td><td>A. Etrangères</td></tr>
		<tr><td>V Peillon</td><td>Education</td></tr>
		<tr><td>C Taubira</td><td>Justice</td></tr>
		<tr><td>P Moscovici</td><td>Economie</td></tr>
		<tr><td>M Valls</td><td>Intérieur</td></tr>
	</tbody>
</table>

Invité · 26/06/2018, 13h33

1- Définir les largeurs des colonnes se fait dans le <colgroup>.

Les tableaux (XHTML & CSS)

2- Dis-nous quel tuto tu as suivi.
Cela dit, l'exemple que tu montres ne vaut pas grand chose.

Je pense que tu t'embarques inutilement dans une problématique complexe.
Surtout en "responsive".

A voir :

**rlelamer** · 26/06/2018, 21h41

Bonsoir,
Merci pour les liens jreaux62.

J'ai testé plusieurs choses et je me suis aperçu que ce n'était pas ce que je souhaitais faire ... maintenant je peux mieux le définir
Voila le comportement de la popup actuelle. (je vais détailler)

popup.html

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
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="popup.css">
    </head>
    <body>
        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Time</th>
                        <th title="Timezone">TZ</th>
                        <th>Position</th>
                        <th title="Time To Waypoint">TTW</th>
                        <th title="Distance To Waypoint">DTW</th>
                        <th title="Distance To Go">DTG</th>
                        <th title="True Wind Direction">TWD</th>
                        <th title="True Wind Speed">TWS</th>
                        <th title="True Wind Angle">TWA</th>
                        <th title="Bearing To Waypoint - Heading">BTW</th>
                        <th>Sail</th>
                        <th title="Speed Through Water - Boat speed">STW</th>
                        <th title="Average True Wind Angle">ATWA</th>
                        <th title="Average Bearing To Waypoint">ABTW</th>
                    </tr>
                </thead>
                <tbody id="pointsTable" align="center">
                </tbody>
            </table>
        </div>
        <br>
        <div id="localtimeDiv">
            <input type="checkbox" id="localtime" tabindex="-1">
            <label>Local Time</label>
        </div>
        <div id="versionDiv">
            <label>Version</label>
            <label id="version"></label>
        </div>
        <div id="gpxDiv">
            <input class="cssButton" type="button" id="gpxExport" value=".GPX" tabindex="-1">
        </div>
        <br>
        <textarea id="gpxOutput" rows="2" readonly tabindex="-1">...::: Click on GPX button for generate file :::...
Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
    </body>
    <script src="bundle.js"></script>
</html>

popup.css

Code CSS :

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
body {
    font-size: 11px;
    margin: 5px;
}
 
.table-wrap {
    border: 1px solid black;
}
 
.table-wrap table {
    text-align: center;
    width: 100%;
}
 
.table-wrap table th, .table-wrap table td {
    border: 1px solid black;
    padding: 1px;
    white-space: nowrap;
}
 
tr:hover td {
     background-color: lightgray;
}
 
tr {
     background-color: white;
}
 
#localtimeDiv {
    float: left;
}
 
#versionDiv {
    float: right;
}
 
#gpxDiv {
    margin: 0 auto;
    text-align: center;
}
 
.cssButton {
    font-size: 11px;
}
 
#gpxOutput {
    width: calc(100% - 5px);
    resize: none;
    font-size: 11px;
}

me donne
screen1

je scroll jusqu'en bas de celle ci, ça me donne

screen2

ce que je souhaite mettre en place

à l'ouverture de la popup, c'est la même chose que le screen1 en revanche lorsque je scroll jusqu'en bas le screen donnerait ceci (c'est un montage)

Seul thead est fixe, lors du scroll en bas de la popup tout remonte mais thead reste en place.

Dans popup.html, j'ai ajouter une classe pour thead

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
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="popup.css">
    </head>
    <body>
        <div class="table-wrap">
            <table>
                <thead class="fixedthead">
                    <tr>
                        <th>Date</th>
                        <th>Time</th>
                        <th title="Timezone">TZ</th>
                        <th>Position</th>
                        <th title="Time To Waypoint">TTW</th>
                        <th title="Distance To Waypoint">DTW</th>
                        <th title="Distance To Go">DTG</th>
                        <th title="True Wind Direction">TWD</th>
                        <th title="True Wind Speed">TWS</th>
                        <th title="True Wind Angle">TWA</th>
                        <th title="Bearing To Waypoint - Heading">BTW</th>
                        <th>Sail</th>
                        <th title="Speed Through Water - Boat speed">STW</th>
                        <th title="Average True Wind Angle">ATWA</th>
                        <th title="Average Bearing To Waypoint">ABTW</th>
                    </tr>
                </thead>
                <tbody id="pointsTable" align="center">
                </tbody>
            </table>
        </div>
        <br>
        <div id="localtimeDiv">
            <input type="checkbox" id="localtime" tabindex="-1">
            <label>Local Time</label>
        </div>
        <div id="versionDiv">
            <label>Version</label>
            <label id="version"></label>
        </div>
        <div id="gpxDiv">
            <input class="cssButton" type="button" id="gpxExport" value=".GPX" tabindex="-1">
        </div>
        <br>
        <textarea id="gpxOutput" rows="2" readonly tabindex="-1">...::: Click on GPX button for generate file :::...
Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
    </body>
    <script src="bundle.js"></script>
</html>

et pour popup.css

Code CSS :

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
body {
    font-size: 11px;
    margin: 5px;
}
 
.table-wrap {
    border: 1px solid black;
}
 
.table-wrap table {
    text-align: center;
    width: 100%;
}
 
.fixedthead {
    position: fixed;
}
 
.table-wrap table th, .table-wrap table td {
    border: 1px solid black;
    padding: 1px;
    white-space: nowrap;
}
 
tr:hover td {
     background-color: lightgray;
}
 
tr {
     background-color: white;
}
 
#localtimeDiv {
    float: left;
}
 
#versionDiv {
    float: right;
}
 
#gpxDiv {
    margin: 0 auto;
    text-align: center;
}
 
.cssButton {
    font-size: 11px;
}
 
#gpxOutput {
    width: calc(100% - 5px);
    resize: none;
    font-size: 11px;
}

ce qui me donne

Evidement le rendu n'est pas au rendez vous mais le comportement oui.

il me faudrait d'une positionner correctement thead par rapport à son remplissage et également que les colonnes soient ajustées donc le rendu que je souhaiterais mettre en place doit être possible je vais continuer de rechercher sur le forum et sur le net si un autre à eu la même idée tordue que moi pour ce comportement d'une page ou d'une popup. Si tu ou d'autres membres ont des infos, conseils ou manières de mise en oeuvre je suis preneur.

Merci

Invité · 26/06/2018, 22h09

1- Pas besoin d'une classe sur thead :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.table-wrap table thead {
    position: fixed;
}

Mais je doute que ce soit la solution...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
                <tbody id="pointsTable" align="center">
                </tbody>

2- Tu as une contrainte supplémentaire : <tbody> est rempli via JavaScript ! (il n'y a pas de données au départ).

il me faudrait d'une positionner correctement thead par rapport à son remplissage

Oui... APRES le remplissage.
Donc : en JavaScript (probablement).

**rlelamer** · 26/06/2018, 22h16

Oui et elle est de taille ( sans jeux de mots ... )

c'est le "width" le plus grand des "td" de chaque colonne qui défini le "width" pour chaque "th"...

Invité · 26/06/2018, 22h22

As-tu testé le plugin ?
(moi, non)

**rlelamer** · 26/06/2018, 22h29

Non j'ai pas testé
Je suis une bille en développement, il y a moins de 6 mois je ne connaissais rien au JS, HTML et là je découvre le CSS ...
C'est un métier ( et pas le miens ) en revanche ça m'intéresse beaucoup.

Invité · 26/06/2018, 22h48

C'est l'intérêt d'un plugin: il existe une doc, un "mode d'emploi"...

**rlelamer** · 28/06/2018, 01h19

Pour réaliser ce que je souhaitais il m'a fallu remplacer

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.table-wrap table th, .table-wrap table td {
    border: 1px solid black;
    padding: 1px;
    white-space: nowrap;
}

par

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
.table-wrap table th {
    position: sticky;
    top: 3px;
    border: 1px solid black;
    background-color: white;
}
 
.table-wrap table td {
    border: 1px solid black;
    padding: 1px;
    white-space: nowrap;
}

Si je pouvais cacher le tableau qui défile lors du scroll dans la marge en haut le rendu serait parfait, une idée ?

**rlelamer** · 28/06/2018, 20h04

J'ai tenté de forcer la marge en blanc ça ne fonctionne pas j'ai aussi regardé du coté de "hidden" mais rien concernant les marges puis de z-index: 1 pour "forcer l'affichage de la marge mais rien non plus ...
Soit il y a une ou des solutions que je n'ai pas encore trouvé soit c'est impossible, si quelqu'un peux m'aiguiller ça serait cool, merci

Invité · 28/06/2018, 20h19

Sans page en ligne, difficile à reproduire, donc à corriger.

**rlelamer** · 28/06/2018, 21h10

Bonsoir jreaux62,

Voila pour le code en ligne (j'ai repris ton exemple existant et j'ai mis les modifs)

(v1) : https://codepen.io/jreaux62/pen/gdyYep

**NoSmoking** · 29/06/2018, 16h04

Bonjour,

Souvent dans les codes que j'ai trouvé, width est défini ainsi que height sauf que je ne peux pas les définir vu que ça évolue a chaque fois ...

si tu ne veux/peux pas définir les largeurs des colonnes il ne te reste effectivement qu'une seule alternative, j'ai cité le JavaScript et cela peut être simple en modifiant la structure.

Par contre je ne comprend pas pourquoi tu souhaites que le « footer » suive le scroll du tableau.

**rlelamer** · 29/06/2018, 23h55

Bonjour NoSmoking,
Le JS dont tu parles je sais pas ou le visualiser ... (désolé j'ai le cerveau qui fonctionne a 2 à l'heure, gavé de taf ...)

Pour l'histoire du footer, c'est parce que lors d'un scroll classique sur la popup, c'est ce qu'il se passe.
Le faite d'avoir le header "persistant" ne modifie pas le scroll classique et ajoute "juste" l'amélioration de visualiser les titres de colonnes ( ce que l'on m'a demandé plusieurs fois ).
Ce genre d'amélioration visuelles c'est pour satisfaire des demandes, je suis plus focalisé sur l'ajout de fonctionnalités en cohérence avec l'idée que je me fais de l'optimisation globale de ces données.

**NoSmoking** · 30/06/2018, 11h27

Dans la mesure où on ne veut/peut pas fixer de largeur aux colonnes on peut utiliser le javascript pour redéfinir la largeur des colonnes de l'entête ou on peut utiliser la « force brute » qui consiste à faire un clonage de la <table> et de ne faire apparaître que le <thead> dans un élément placé, en position:absolute, en haut du conteneur de la <table>.

• La structure HTML :

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
<div class="table-conteneur">  
  <div class="theader-fixed">
    <!-- c'est ici que l'on met une copie de la <table> -->
  </div>
  <div class="tbody-scroll">
    <table>
      <thead>
        <!-- les données d'entête -->
      </thead>
      <tbody>
        <!-- les données de la table -->
      </tbody>
    </table>
  </div>
</div>

• Sans CSS on risque de ne rien obtenir aussi on aura au minimum (les valeurs mises le sont pour ton cas perso)

Code :

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
.table-conteneur {
  position: relative;
  width: 800px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid black;
  font-size: 11px;
}
.theader-fixed {
/*  height: 19px;               /* fait par script */
/*  width: calc(100% - 17px);   /* fait par script */
  z-index: 1;
  position: absolute;
  overflow: hidden;
}
.tbody-scroll {
/*  height: 198px;              /* 10 lignes visibles peu être fait par script */
  overflow: auto;
}
thead {
/*  height: 19px;               /* fait par script */
}

L'idée est aussi quand même, tant qu'à utiliser le JavaScript, de faire faire certains calculs par le script.

• Le script est le suivant

Code javascript :

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
// réalisation et injection de la copie de la table
var tableRef = document.querySelector(".tbody-scroll table");
var headerFixed = document.querySelector(".theader-fixed");
headerFixed.appendChild(tableRef.cloneNode(true));
// ajustement hauteur de scroll propre
var nbLigne = 12;
if (nbLigne < tableRef.rows.length - 1) { // on ne tient pas compte du header
  var bodyScroll = document.querySelector(".tbody-scroll");
  var rect1 = tableRef.rows[0].getBoundingClientRect();
  var rect2 = tableRef.rows[nbLigne + 1].getBoundingClientRect();
  bodyScroll.style.height = (rect2.top - rect1.top) + "px";
}
// calcul pour réajustement
var hEntete = tableRef.tHead.offsetHeight;
// calcul largeur scroll-barre
var w_1 = tableRef.offsetWidth;
var w_2 = tableRef.parentNode.offsetWidth;
// réajustement du header fixe
headerFixed.style.height = hEntete + "px";
headerFixed.style.width = "calc(100% - " + (w_2 - w_1) + "px)";

• Voici ce que l'on peut obtenir à partir des données récupérées sur le codepen

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>&lt;thead&gt; en position fixed</title>
<meta name="Author" content="NoSmoking">
<style>
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font: 1em/1.25 Verdana,arial;
}
h1, h2, h3 {
  color: #069;
}
main {
  display: block;
  max-width: 60em;
  margin: auto;
  border-top: 1px solid transparent;
}
.table-conteneur {
  position: relative;
  width: 800px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid black;
  font-size: 11px;
}
.theader-fixed {
/*  height: 19px;               /* fait par script */
/*  width: calc(100% - 17px);   /* fait par script */
  z-index: 1;
  position: absolute;
  overflow: hidden;
  background: #FFF;
}
.tbody-scroll {
/*  height: 198px;              /* 10 lignes visibles peu être fait par script */
  margin-bottom: 5px;
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 1px;
  text-align: center;
  cursor: pointer;
}
thead {
/*  height: 19px;               /* fait par script */
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2) )repeat scroll 0% 0% #EEE;
  text-shadow: 1px 1px 1px #FFF;
}
th, td {
  padding: 1px;
  border: 1px solid #CCC;
  white-space: nowrap;
}
tr:hover td {
  background-color: #CDE;
}
tr {
  background-color: transparent;
}
#localtimeDiv {
  float: left;
}
#versionDiv {
  float: right;
}
#gpxDiv {
  margin: 0 auto;
  text-align: center;
}
.cssButton {
  font-size: inherit;
}
#gpxOutput {
  display: block;
  box-sizing: border-box;
  width: calc(100% - 4px);
  margin: 1em 2px 2px;
  font-size: inherit;
  resize: none;
}
</style>
<body>
<main>
  <h1>&lt;thead&gt; en position fixed</h1>
  <div class="table-conteneur">  
    <div class="theader-fixed">
      <!-- c'est ici que l'on met une copie de la <table> -->
    </div>
    <div class="tbody-scroll">
      <table>
        <thead>
          <tr>
            <th>Date</th><th>Time</th><th title="Timezone">TZ</th><th>Position</th><th title="Time To Waypoint">TTW</th><th title="Distance To Waypoint">DTW</th><th title="Distance To Go">DTG</th><th title="True Wind Direction">TWD</th><th title="True Wind Speed">TWS</th><th title="True Wind Angle">TWA</th><th title="Bearing To Waypoint - Heading">BTW</th><th>Sail</th><th title="Speed Through Water - Boat speed">STW</th><th title="Average True Wind Angle">ATWA</th><th title="Average Bearing To Waypoint">ABTW</th>
          </tr>
        </thead>
        <tbody id="pointsTable">
          <tr>
            <td>2018-05-14</td><td>16:30</td><td>CEST</td><td>19°26'15"N - 60°35'37"W</td><td>T+ 0:00</td><td>0.0nm</td><td>158.4nm</td><td>83°</td><td>16.0 kt</td><td>152°</td><td>235°</td><td>Spi</td><td>8.84 kts</td><td>-</td><td>-</td>
          </tr>
          <tr>
            <td>2018-05-14</td><td>16:40</td><td>CEST</td><td>19°26'15"N - 60°37'30"W</td><td>T+ 0:10</td><td>1.5nm</td><td>156.9nm</td><td>83°</td><td>16.0 kt</td><td>152°</td><td>234°</td><td>Spi</td><td>8.82 kts</td><td>152°</td><td>235°</td>
          </tr>
          <tr>
            <td>2018-05-14</td><td>16:40</td><td>CEST</td><td>19°26'15"N - 60°37'30"W</td><td>T+ 0:10</td><td>1.5nm</td><td>156.9nm</td><td>83°</td><td>16.0 kt</td><td>152°</td><td>234°</td><td>Spi</td><td>8.82 kts</td><td>152°</td><td>235°</td>
          </tr>
          <tr>
            <td>2018-05-14</td><td>16:40</td><td>CEST</td><td>19°26'15"N - 60°37'30"W</td><td>T+ 0:10</td><td>1.5nm</td><td>156.9nm</td><td>83°</td><td>16.0 kt</td><td>152°</td><td>234°</td><td>Spi</td><td>8.82 kts</td><td>152°</td><td>235°</td>
          </tr>
          <tr>
            <td>2018-05-14</td><td>16:40</td><td>CEST</td><td>19°26'15"N - 60°37'30"W</td><td>T+ 0:10</td><td>1.5nm</td><td>156.9nm</td><td>83°</td><td>16.0 kt</td><td>152°</td><td>234°</td><td>Spi</td><td>8.82 kts</td><td>152°</td><td>235°</td>
          </tr>
          <tr>
            <td>2018-05-14</td><td>16:40</td><td>CEST</td><td>19°26'15"N - 60°37'30"W</td><td>T+ 0:10</td><td>1.5nm</td><td>156.9nm</td><td>83°</td><td>16.0 kt</td><td>152°</td><td>234°</td><td>Spi</td><td>8.82 kts</td><td>152°</td><td>235°</td>
          </tr>
          <tr>
            <td>2018-05-14</td><td>16:40</td><td>CEST</td><td>19°26'15"N - 60°37'30"W</td><td>T+ 0:10</td><td>1.5nm</td><td>156.9nm</td><td>83°</td><td>16.0 kt</td><td>152°</td><td>234°</td><td>Spi</td><td>8.82 kts</td><td>152°</td><td>235°</td>
          </tr>
          <tr>
            <td>2018-05-14</td><td>16:40</td><td>CEST</td><td>19°26'15"N - 60°37'30"W</td><td>T+ 0:10</td><td>1.5nm</td><td>156.9nm</td><td>83°</td><td>16.0 kt</td><td>152°</td><td>234°</td><td>Spi</td><td>8.82 kts</td><td>152°</td><td>235°</td>
          </tr>
          <tr>
            <td>2018-05-14</td><td>16:40</td><td>CEST</td><td>19°26'15"N - 60°37'30"W</td><td>T+ 0:10</td><td>1.5nm</td><td>156.9nm</td><td>83°</td><td>16.0 kt</td><td>152°</td><td>234°</td><td>Spi</td><td>8.82 kts</td><td>152°</td><td>235°</td>
          </tr>
          <tr>
            <td>2018-05-14</td><td>16:40</td><td>CEST</td><td>19°26'15"N - 60°37'30"W</td><td>T+ 0:10</td><td>1.5nm</td><td>156.9nm</td><td>83°</td><td>16.0 kt</td><td>152°</td><td>234°</td><td>Spi</td><td>8.82 kts</td><td>152°</td><td>235°</td>
          </tr>
          <tr>
            <td>2018-05-14</td><td>16:40</td><td>CEST</td><td>19°26'15"N - 60°37'30"W</td><td>T+ 0:10</td><td>1.5nm</td><td>156.9nm</td><td>83°</td><td>16.0 kt</td><td>152°</td><td>234°</td><td>Spi</td><td>8.82 kts</td><td>152°</td><td>235°</td>
          </tr>
          <tr>
            <td>2018-05-14</td><td>16:40</td><td>CEST</td><td>19°26'15"N - 60°37'30"W</td><td>T+ 0:10</td><td>1.5nm</td><td>156.9nm</td><td>83°</td><td>16.0 kt</td><td>152°</td><td>234°</td><td>Spi</td><td>8.82 kts</td><td>152°</td><td>235°</td> 
          </tr>
          <tr>
            <td>2018-05-14</td><td>16:40</td><td>CEST</td><td>19°26'15"N - 60°37'30"W</td><td>T+ 0:10</td><td>1.5nm</td><td>156.9nm</td><td>83°</td><td>16.0 kt</td><td>152°</td><td>234°</td><td>Spi</td><td>8.82 kts</td><td>152°</td><td>235°</td> 
          </tr>
          <tr>
            <td>2018-05-14</td><td>16:40</td><td>CEST</td><td>19°26'15"N - 60°37'30"W</td><td>T+ 0:10</td><td>1.5nm</td><td>156.9nm</td><td>83°</td><td>16.0 kt</td><td>152°</td><td>234°</td><td>Spi</td><td>8.82 kts</td><td>152°</td><td>235°</td>
          </tr> 
          <tr>
            <td>2018-05-14</td><td>16:40</td><td>CEST</td><td>19°26'15"N - 60°37'30"W</td><td>T+ 0:10</td><td>1.5nm</td><td>156.9nm</td><td>83°</td><td>16.0 kt</td><td>152°</td><td>234°</td><td>Spi</td><td>8.82 kts</td><td>152°</td><td>235°</td>
          </tr> 
          <tr>
            <td>2018-05-14</td><td>16:40</td><td>CEST</td><td>19°26'15"N - 60°37'30"W</td><td>T+ 0:10</td><td>1.5nm</td><td>156.9nm</td><td>83°</td><td>16.0 kt</td><td>152°</td><td>234°</td><td>Spi</td><td>8.82 kts</td><td>152°</td><td>235°</td>
          </tr> 
        </tbody>
      </table>
    </div>
    <div id="localtimeDiv">
      <input type="checkbox" id="localtime" tabindex="-1">
      <label>Local Time</label>
    </div>
    <div id="versionDiv">
      <label>Version</label>
      <label id="version">x.x</label>
    </div>
    <div id="gpxDiv">
      <input class="cssButton" type="button" id="gpxExport" value=".GPX" tabindex="-1">
    </div>
    <textarea id="gpxOutput" rows="2" readonly tabindex="-1">...::: Click on GPX button for generate file :::...
    Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
  </div>
</main>  
 
 
<script>
"use strict";
// réalisation et injection de la copie de la table
var tableRef = document.querySelector(".tbody-scroll table");
var headerFixed = document.querySelector(".theader-fixed");
headerFixed.appendChild(tableRef.cloneNode(true));
// ajustement hauteur de scroll propre
var nbLigne = 12;
if (nbLigne < tableRef.rows.length - 1) { // on ne tient pas compte du header
  var bodyScroll = document.querySelector(".tbody-scroll");
  var rect1 = tableRef.rows[0].getBoundingClientRect();
  var rect2 = tableRef.rows[nbLigne + 1].getBoundingClientRect();
  bodyScroll.style.height = (rect2.top - rect1.top) + "px";
}
// calcul pour réajustement
var hEntete = tableRef.tHead.offsetHeight;
// calcul largeur scroll-barre
var w_1 = tableRef.offsetWidth;
var w_2 = tableRef.parentNode.offsetWidth;
// réajustement du header fixe
headerFixed.style.height = hEntete + "px";
headerFixed.style.width = "calc(100% - " + (w_2 - w_1) + "px)";
</script>
</body>
</html>

A toi maintenant d'adapter.

**rlelamer** · 02/07/2018, 23h09

Bonsoir NoSmoking,

Merci pour ce code détaillé du coup j'ai compris et appris beaucoup de choses, je n'en aurais pas été capable ça c'est une certitude ...
L'adapter pas de soucis j'ai fais quelques tests et je m'en débrouillerais y'a juste une chose que je capte pas

Je voulais voir le comportement si les instructions "sortent" de 800px (qui va devenir un 100% dans l'extension final) donc je l'ai volontairement passé à 600px pour simuler le cas ou les instructions "dépassent" la popup et le scroll horizontal s'active voici le résultat

Pourquoi le scroll fonctionne bien sur le tableau mais pas sur le header ?

Il est possible de corriger ça ?

Merci encore le rendu global est vraiment top