Bonjour,
Je cherche à reproduire un thead fixe et un tbody scrollable.
Sauf que l'architecture est complètement différente de la dernière fois et je m'y perds ...

dashboard.js
Code JS : 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
 
[...]
    var tableHeader =  '<tr>'
        + '<th>' + 'Time' + '</th>'
        + commonHeaders()
        + '<th title="Reported speed">' + 'vR (kn)' + '</th>'
        + '<th title="Calculated speed (Δd/Δt)">' + 'vC (kn)' + '</th>'
        + '<th title="Polar-derived speed">' + 'vT (kn)' + '</th>'
        + '<th title="Foiling factor">' + 'Foils' + '</th>'
        + '<th title="Calculated distance">' + 'Δd (nm)' + '</th>'
        + '<th title="Time between positions">' + 'Δt (s)' + '</th>'
        + '<th title="Sail change time remaining">' + 'Sail' + '</th>'
        + '<th title="Gybing time remaining">' + 'Gybe' + '</th>'
        + '<th title="Tacking time remaining">' + 'Tack' + '</th>'
        + '</tr>';
 
    function friendListHeader() {
        return '<tr>'
            + genth("th_rt","RT","Call Router",sortField == 'none', undefined)
            + genth("th_name","Friend/Opponent",undefined, sortField == 'displayName', currentSortOrder) 
            + genth("th_lu","Last Update",undefined)
            + genth("th_rank","Rank",undefined, sortField == 'rank', currentSortOrder)
            + genth("th_dtf","DTF","Distance to Finish",sortField == 'distanceToEnd', currentSortOrder)
            + genth("th_dtu","DTU","Distance to Us",sortField == 'distanceToUs', currentSortOrder) 
            + genth("th_brg","BRG","Bearing from Us", undefined)
            + genth("th_sail","Sail",undefined)
            + genth("th_state","State",undefined, sortField == 'state', currentSortOrder) 
            + genth("th_psn","Position",undefined)
            + genth("th_hdg","HDG","Heading", sortField == 'heading', currentSortOrder)
            + genth("th_twa","TWA","True Wind Angle", sortField == 'twa', currentSortOrder)
            + genth("th_tws","TWS","True Wind Speed",sortField == 'tws', currentSortOrder) 
            + genth("th_speed","Speed","Boat Speed",sortField == 'speed', currentSortOrder) 
            +  '</tr>';
    }
 
    function genth(id,content,title,sortfield,sortmark) {
        if(sortfield && sortmark != undefined) {
            content = content + " " + (sortmark ? '&#x25b2;' : '&#x25bc;');
        }
        return "<th id='" + id + "'"
            + (sortfield? " style='color:BlueViolet;'" : "")
            + (title ? (" title='" + title + "'") : "")
            + ">" + content + "</th>";
    }
 
    function commonHeaders() {
        return '<th>' + 'Rank' + '</th>'
            + '<th title="Distance To Leader">' + 'DTL' + '</th>'
            + '<th title="Distance To Finish">' + 'DTF' + '</th>'
            + '<th>' + 'Position' + '</th>'
            + '<th title="Heading">' + 'HDG' + '</th>'
            + '<th title="True Wind Angle">' + 'TWA' + '</th>'
            + '<th title="True Wind Speed">' + 'TWS' + '</th>'
            + '<th title="True Wind Direction"> ' + 'TWD' + '</th>'
            + '<th title="Auto TWA activated">' + 'aTWA' + '</th>'
            + '<th title="Auto Sail time remaining">' + 'aSail' + '</th>';
    }
 
    function makeFriendsHTML(rf) {
        var field = "speed";
        if (rf === undefined) {
            return "No friend positions received yet";
        } else {
            sortFriends(rf);
            return '<table style=\"width:100%\">'
                + friendListHeader()
                + Array.from(rf.table||[]).map(makeFriendListLine, rf).join(' ');
                + '</table>';
        }
    }
 
    function makeTableHTML (r) {
        return '<table style="width:100%">'
            + tableHeader
            + (r === undefined?"":r.tableLines.join(' '))
            + '</table>';
    }
[...]


J'ai tenté la méthode avec "position: sticky", ce qui me donne ceci :
dashboard.js
Code JS : 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
 
[...]
    var tableHeader =  '<thead class="sticky"><tr>'
        + '<th>' + 'Time' + '</th>'
        + commonHeaders()
        + '<th title="Reported speed">' + 'vR (kn)' + '</th>'
        + '<th title="Calculated speed (Δd/Δt)">' + 'vC (kn)' + '</th>'
        + '<th title="Polar-derived speed">' + 'vT (kn)' + '</th>'
        + '<th title="Foiling factor">' + 'Foils' + '</th>'
        + '<th title="Calculated distance">' + 'Δd (nm)' + '</th>'
        + '<th title="Time between positions">' + 'Δt (s)' + '</th>'
        + '<th title="Sail change time remaining">' + 'Sail' + '</th>'
        + '<th title="Gybing time remaining">' + 'Gybe' + '</th>'
        + '<th title="Tacking time remaining">' + 'Tack' + '</th>'
        + '</thead></tr>';
 
    function friendListHeader() {
        return '<thead class="sticky"><tr>'
            + genth("th_rt","RT","Call Router",sortField == 'none', undefined)
            + genth("th_name","Friend/Opponent",undefined, sortField == 'displayName', currentSortOrder) 
            + genth("th_lu","Last Update",undefined)
            + genth("th_rank","Rank",undefined, sortField == 'rank', currentSortOrder)
            + genth("th_dtf","DTF","Distance to Finish",sortField == 'distanceToEnd', currentSortOrder)
            + genth("th_dtu","DTU","Distance to Us",sortField == 'distanceToUs', currentSortOrder) 
            + genth("th_brg","BRG","Bearing from Us", undefined)
            + genth("th_sail","Sail",undefined)
            + genth("th_state","State",undefined, sortField == 'state', currentSortOrder) 
            + genth("th_psn","Position",undefined)
            + genth("th_hdg","HDG","Heading", sortField == 'heading', currentSortOrder)
            + genth("th_twa","TWA","True Wind Angle", sortField == 'twa', currentSortOrder)
            + genth("th_tws","TWS","True Wind Speed",sortField == 'tws', currentSortOrder) 
            + genth("th_speed","Speed","Boat Speed",sortField == 'speed', currentSortOrder) 
            +  '</thead></tr>';
    }
 
    function makeFriendsHTML(rf) {
        var field = "speed";
        if (rf === undefined) {
            return "No friend positions received yet";
        } else {
            sortFriends(rf);
            return '<table style=\"width:100%\">'
                + friendListHeader()
                + '<tbody>'
                + Array.from(rf.table||[]).map(makeFriendListLine, rf).join(' ');
                + '</tbody>'
                + '</table>';
        }
    }
 
    function makeTableHTML (r) {
        return '<table style="width:100%">'
            + tableHeader
            + '<tbody>'
            + (r === undefined?"":r.tableLines.join(' '))
            + '</tbody>'
            + '</table>';
    }
[...]

style.css
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
thead.sticky th {
    position: sticky;
    top: 0; 
    background-color: white;
    outline: 1px solid black;
    outline-offset: -1px;
}

Sans outline et outline-offset je perds la bordure lors du scroll, avec je me retrouve avec quelque chose en gras horrible ...

J'ai essayé une autre méthode avec display: block et une classe sur table mais le rendu est encore pire.

Je m'y prends mal surement ... vous aborderiez ça de quelle manière ?

Merci