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 ? '▲' : '▼'); } 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
Partager