Bonjour à tous,
Etant donné que les tableaux aux entête fixe sont une galère a gérer du moment que le contenu des colonnes peuvent varier, je me suis décidé il y a quelques années à faire un script JS pour retailler mon tableau à la bonne taille.
Néanmoins c'est un vieux script. Je voudrais savoir ce que vous en pensez et si vous avez des idées pour l'optimiser.
Voici comment celui-ci fonctionne :
Je l'appelle une fois le chargement terminé.
Dans le HTML cela nécéssite de faire les tableaux comme ceci :
Je garde les deux <div> car dans le cas d'un tableau assez balese (comme ca m'arrive parfois) je suis obligé d'augmenter la taille de la div (genre a 10000px) pour pouvoir retaillé le tableau (sinon il peut pas dépasser la taille de la ou il est inclu).
Je rajoute aussi souvent dans le tableau entete un <td> de quelques pixel pour compenser le décalage avec la barre de scroll.
Qu'en pensez-vous ? J'utilise ce truc depuis bien longtemps et j'avoue ne pas vraiment m'être penché dessus depuis.[/i][/i][/i][/i][/i][/i]
Etant donné que les tableaux aux entête fixe sont une galère a gérer du moment que le contenu des colonnes peuvent varier, je me suis décidé il y a quelques années à faire un script JS pour retailler mon tableau à la bonne taille.
Néanmoins c'est un vieux script. Je voudrais savoir ce que vous en pensez et si vous avez des idées pour l'optimiser.
Voici comment celui-ci fonctionne :
function scrolltableau_simple(){
var tableau_td = document.getElementById("tableau_stat_scroll").getElementsByTagName("td");
var tableau_entete = document.getElementById("tableau_stat").getElementsByTagName("td");
for(var i=0;i<tableau_entete.length-1;i++){
if(tableau_entete[i].offsetWidth > tableau_td[i].offsetWidth){
tableau_td[i].style.width = tableau_entete[i].offsetWidth-8+"px"; //-8 Car -2(cause border) et -6 pour les deux padding de 3px
}else{
tableau_entete[i].style.width = tableau_td[i].offsetWidth-8+"px";
}
}
}
Je l'appelle une fois le chargement terminé.
Dans le HTML cela nécéssite de faire les tableaux comme ceci :
<div id='scroll_tableau'>
<table id='tableau_stat_scroll'>
//mon tableau entete. Avec des td mais je pourrais y mettre des th et changement dans le JS
</table>
</div>
<div id='scroll_tableau2' style='overflow:auto;height:50px;'>
<table>
//Mon tableau avec mes données.
</table>
</div>
Je garde les deux <div> car dans le cas d'un tableau assez balese (comme ca m'arrive parfois) je suis obligé d'augmenter la taille de la div (genre a 10000px) pour pouvoir retaillé le tableau (sinon il peut pas dépasser la taille de la ou il est inclu).
Je rajoute aussi souvent dans le tableau entete un <td> de quelques pixel pour compenser le décalage avec la barre de scroll.
Qu'en pensez-vous ? J'utilise ce truc depuis bien longtemps et j'avoue ne pas vraiment m'être penché dessus depuis.[/i][/i][/i][/i][/i][/i]