dimensionner les tailles des cellules du header d'un tableau en position absolute
Bonjour
Je travaille sur un tableau dont le header doit tout le temps être affiché.
Pour cela je génère mon tableau, je "coupe" le thead et l'injecte dans un nouveau tableau afin de le placer en position absolute.
Code:
1
2
3
4
5
6
7
8
9
10
|
var init = arguments[0] || false;
if(init)
{
var thead = $(".hugeTableCont table thead").detach();
var table = $(document.createElement("table"));
$(".hugeTableCont .headerTable").append(table.append(thead));
} |
Jusque là, pas de problème, les soucis viennent ensuite quand il s'agit de dimensionner chaque parcelle du tableau. Il est à noter que les tailles sont fixées en pourcentage dans mon tbody.
Pour m'assurer que les cellules du thead soient équivalentes à celles du tbody, je récupère la taille de chaque td pour la fixer sur les th correspondant :
Code:
1
2
3
4
5
6
|
$(".hugeTableCont .hugeTable tbody tr:eq(0) td").each(function (i) {
var TDwidth = $(this).width();
$(".hugeTableCont .headerTable table thead tr th").eq(i).width(TDwidth);
}); |
Finalement j'obtient un résultat assez variable selon le navigateur. Chrome est impeccable, mais tous les autres que j'ai pu testé ont quelques pixels de décalage comme vous pouvez le voir sur cette image (cliquez ici)
Je me demande si le problème ne vient pas des tailles fixées en pourcentage alors que les tailles que je récupère en javascript sont en pixel. il doit y avoir un problème dans l’équivalence % / px
Merci pour vos conseils et désolé s'ils s’avèrent que ce soit un problème de html/css.
Pour info le code HTML :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<div class="hugeTableCont">
<div class="headerTable"></div> // c'est cette div qui est fixée en position absolute
<div class="bodyTable">
<table class="hugeTable" style="border-spacing: 0;border-width:0px;border-collapse:collapse;">
<thead>
<tr>
<th></th> // nombre de cellules variable
</tr>
</thead>
<tbody>
<tr>
<td></td> // nombre de cellules variable
</tr>
</tbody>
</table>
</div>
</div> |
