Entête flottante d'un tableau et scrollbar horizontale
Bonjour à tous,
J'ai créé un script permettant d'avoir un tableau html avec des articles avec un nombre de colonnes qui peut varier. Le tableau a la particularité d'avoir une entête où cette dernière lorsqu'on actionne la scrollbare verticale en la faisant, au moment où l'entête touche le haut du navigateur il reste fixe même si on continue à faire monter le tableau. Jusque là c'est la fonctionnalité que je souhaite.
Cependant, dans certain cas il peut y avoir une scrollbare horizontale, car le tableau en question est plus large que le corps du navigateur. Si l'utilisateur bouge la scrollbare horizontale l'entête du tableau reste fixe et cela fait décaler les colonnes par rapport à l'entête. les colonnes ne sont plus en face de leurs titres correspondant au niveau des entêtes.
Se que je souhaite :
C'est d'avoir un tableau avec une entête flottante restant fixe si le tableau monte trop haut en utilisant la scrollbare verticale (ce qui est fait)
Que le tableau ait une entête restant bien en face des colonnes lorsque l'on fait bouger la scrollbare horizontale.
Je voudrai avoir un tableau avec une entête fixe verticalement et non fixe horizontalement (les colonnes restent en face des titres correspondants).
Voici le code javascript utilisé :
Code:
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
|
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function UpdateTableHeaders() {
$(".persist-area").each(function() {
var el = $(this),
offset = el.offset(),
scrollTop = $(window).scrollTop(),
floatingHeader = $(".floatingHeader", this)
if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
floatingHeader.css({
"visibility": "visible"
});
} else {
floatingHeader.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");
});
$(window)
.scroll(UpdateTableHeaders)
.trigger("scroll");
});
</script> |
Le code HTML :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <table class="persist-area" >
<thead><tr class="persist-header" >
<th >Colonne 1</th>
<th >colonne 2</th>
<th >Colonne 3</th>
<th >Colonne 4</th>
<th >Colonne 5</th></tr>
</thead>
<tbody>
<tr>
<td>Attribut 1</td>
<td>Attribut 2</td>
<td>Attribut 3</td>
<td>Attribut 4</td>
<td>Attribut 5</td>
</tr>
</tbody>
</table> |
Code CSS :
Code:
1
2
3
4
5
6
7
8
9
10
| .floatingHeader {
background-image:url(img.png);background-repeat:repeat-x;color:#FFFFFF; font-weight:bold;background-color:#2A2A2A;
position: fixed;
top: 0;
visibility: hidden;
}
.persist-header{
background-image:url(imgpng);background-repeat:repeat-x;color:#FFFFFF; font-weight:bold;background-color:#2A2A2A;
} |
Cordialement.
