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 :

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

Défilement en CSS

Vue hybride

Discussions similaires

Partager

Partager