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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
|
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="testcss.css"/>
<title>Test CSS</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
<!--
function UpdateTableHeaders() {
$(".persist-area").each(function () {
var el = $(this),
offset = el.offset(),
scrollTop = $(window).scrollTop(),
scrollTop2 = $(window).scrollTop() + window.innerHeight,
floatingHeader = $(".floatingHeader", this),
floatingFooter = $(".floatingFooter", this)
if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
floatingHeader.css({
"visibility": "visible"
});
} else {
floatingHeader.css({
"visibility": "hidden"
});
};
if ((scrollTop2 > offset.top) && (scrollTop2 < offset.top + el.height())) {
floatingFooter.css({
"visibility": "visible"
});
} else {
floatingFooter.css({
"visibility": "hidden"
});
};
});
}
// DOM Ready
$(function () {
var clonedHeaderRow;
$(".persist-area").each(function () {
clonedHeaderRow = $(".persist-header", this);
clonedHeaderRow
.before(clonedHeaderRow.clone())
.css("width", clonedHeaderRow.width())
.addClass("floatingHeader");
clonedFooterRow = $(".persist-footer", this);
clonedFooterRow
.before(clonedFooterRow.clone())
.css("width", clonedFooterRow.width())
.addClass("floatingFooter");
});
$(window)
.scroll(UpdateTableHeaders)
.trigger("scroll");
});
//-->
</script>
</head>
<body>
<h1>Lorem Ipsum</h1>
<h2>Qu'est-ce que le Lorem Ipsum ?</h2>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p>
<h2>D'où vient-il ?</h2>
<p>Contrairement à une opinion répandue, le Lorem Ipsum n'est pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans. Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots latins les plus obscurs, consectetur, extrait d'un passage du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la littérature classique, découvrit la source incontestable du Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant la Renaissance, est un traité sur la théorie de l'éthique. Les premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit amet...", proviennent de la section 1.10.32.</p>
<p>L'extrait standard de Lorem Ipsum utilisé depuis le XVIè siècle est reproduit ci-dessous pour les curieux. Les sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" de Cicéron sont aussi reproduites dans leur version originale, accompagnée de la traduction anglaise de H. Rackham (1914).</p>
<table class="persist-area">
<thead class="persist-header">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tfoot class="persist-footer">
<tr>
<th>Footer 1</th>
<th>Footer 2</th>
<th>Footer 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
<td>Body 3</td>
</tr>
</tbody>
</table>
<h2>Pourquoi l'utiliser ?</h2>
<p>On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes).</p>
<h2>Où puis-je m'en procurer ?</h2>
<p>Plusieurs variations de Lorem Ipsum peuvent être trouvées ici ou là, mais la majeure partie d'entre elles a été altérée par l'addition d'humour ou de mots aléatoires qui ne ressemblent pas une seconde à du texte standard. Si vous voulez utiliser un passage du Lorem Ipsum, vous devez être sûr qu'il n'y a rien d'embarrassant caché dans le texte. Tous les générateurs de Lorem Ipsum sur Internet tendent à reproduire le même extrait sans fin, ce qui fait de lipsum.com le seul vrai générateur de Lorem Ipsum. Iil utilise un dictionnaire de plus de 200 mots latins, en combinaison de plusieurs structures de phrases, pour générer un Lorem Ipsum irréprochable. Le Lorem Ipsum ainsi obtenu ne contient aucune répétition, ni ne contient des mots farfelus, ou des touches d'humour.</p>
</body>
</html> |
Tableau avec entête et pied de page qui restent à l'écran quand on scroll
Répondre avec citation
Je suis justement tombé sur ton premier lien.
Partager