Bootstrap et entête de tableau fixe

Bonjour à tous !

J'utilise le framework Bootstrap pour mon site en développement.

Je crée un tableau qui est assez conséquent et souhaite que l’entête de celui-ci reste au top au scroll...

J'utilise également un pluggin jQuery (http://tablesorter.com/docs/) qui me permet d'appliquer un tri dynamique sur chaque colonne de mon tableau (on click sur l'entete et magie le contenu se trie )

Voici le code que j'ai utilisé :

http://pastebin.com/0HL9Tezr



J'ai du cherché pour fixer l'entete et j'ai trouver la solution en utilisant ".floating-header th" combiné à la fonction affix de bootstrap. (La fonction affix seule ne suffisant pas).

J'ai 2 problèmes :



1) au scroll, mon entête de tableau reste bien, mais le contenu du tableau change de dimension, ce qui fait que les entetes et les colonnes ne sont pas parfaitement alignés, voir complétement décalé dans certains cas... (j'avais trouvé la solution ici -> https://github.com/twbs/bootstrap/issues/4551 , la personne semblait avoir le même soucis mais l'a résolu sans indiquer comment ... )

J'essai de bidouiller alors pour aligner, mais ce n'est vraiment pas propre...



2) J'aimerai redimensionner la première colonne, qui est systématiquement trop large par rapport aux autres. J'ai donc tenter d'entrer un "style="width: 20%;" ou style="width: 120px;" ou encore même "style="width: 50% !important;" dans la première balise <th> mais :

la dimension se change uniquement quand je scroll et uniquement pour l'entete de la première colonne ...



Je deviens chêvre



Si quelqu'un ici aurait la bonne âme de me donner une piste, je lui en serais très reconnaissante !

En espérant ne pas m'être trompée d'endroit sur le forum...

Merci d'avance



Note: j'ai eu énormément de mal à poster ce post, j'ai remarqué que je ne pouvais pas mettre mon code dans le corps du message, voilà pourquoi je suis passée par pastebin... peut être un code trop long ?

Bonsoir foloxflou,

"Une page en ligne vaut mille mots" et serait bien pratique pour analyser le code et les interactions CSS :
- Soit une page d'exemple sur votre serveur en ligne
- Soit une page sur http://codepen.io/ ou http://jsfiddle.net/

Vous feriez gagner beaucoup de temps à ceux qui voudront vous aider .

En l'attente...

Ayant suivi votre conseil, voici mon code mis en forme sous JsFiddle !

http://jsfiddle.net/hSm75/

Le problème : mon entête de tableau ne reste pas au scroll, alors que dans mon site, si... Pourtant j'ai bien mis le même code et importé les bons éléments... Mystère

Bonjour foloxflou,

Il ne manquait pas grand chose pour que cela fonctionne sur votre page http://jsfiddle.net/hSm75/ :

1 - Dans le bloc External Resources de la colonne de gauche, supprimer la librairie jquery.min.js puisqu'elle est déjà configurée et chargée à partir du bloc Frameworks & Extensions.
2 - Dans bloc JavaScript, il faut exécuter les codes jQuery avec un $(document).ready() ou un jQuery(). Voici le code complet :

jQuery(function($){
    $('#results thead').affix({
        offset: {
            top: 10
        }
    });
    
    // Changement de la couleur de fond de l'entête du tableau au scroll
    $(window).scroll(function () {
        if ($(this).scrollTop() > 90) {
            $('#results thead').css('background-color', '#EFEFEF');
        }
    });
    
    $(".floating-header th").each(function () {
        $(this).width($(this).width());
    });
})

Avec ces rectifications, votre en-tête de tableau se positionnera correctement dans JSFIDDLE.

Par contre je n'ai pas rencontré votre problématique suivante...

foloxflou a écrit :
...
1) au scroll, mon entête de tableau reste bien, mais le contenu du tableau change de dimension, ce qui fait que les entetes et les colonnes ne sont pas parfaitement alignés, voir complétement décalé dans certains cas...

En l'attente de vos ajustements, bon code...

Merci pour votre réponse !
Je me suis aperçue en faisant plusieurs test que suivant le contenu de l'entête (s'il est grand par exemple) alors le tableau a tendance à mal se comporter au scroll :
http://jsfiddle.net/DY23f/ <- comme ici

Je ne comprends pas ce comportement, on dirait qu'au scroll, c'est comme si l'entête se détachait complètement de son tableau

Re foloxflou,

Sur Alsacréations, vous avez un p'tit article Gérer les débordements de contenus grâce à CSS qui vous éclairera sur le sujet.

Sur la base de cet article, les lignes CSS suivantes régleront votre problématique :

#results {
    table-layout: fixed; 
}

#results th {
    word-break: break-all;
    
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

Bonne continuation et bon code...
Modifié par Guiwint (26 Jun 2014 - 12:24)

merci beaucup our votre code

Votre solution semble bien marcher, mais sous jsfiddle, lorsque qu'on redimensionne la fenetre du resultat, et quon scroll, alors cette fois c'est l'entete du tableau qui se redimensionne ^^'

http://jsfiddle.net/DY23f/2/

Ha en effet ! Erreur d'inattention de ma part...

Il semblerait que la propriété "overflow: hidden;" se désactive sur les éléments <th /> quand le parent <thead /> est en "position: fixed;" ...

Du coup je peux vous proposer un petit subterfuge : il s'avère que les <div /> ne perdent pas la propriété "overflow: hidden;" quand un de leurs parents est en "position: fixed;".

Complétons le code JS existant pour injecter une <div /> dans chaque <th /> du bandeau de tête du tableau, qui contiendra le texte d'origine, et en appliquant l'ellipsis.

Remplaçons :

$(".floating-header th").each(function () {
    $(this).width($(this).width());
});

... par :

$(".floating-header th").each(function () {
    var
    $th = $(this),
    w = $th.width(), // récupération de la largeur du <th />
    text = $th.text(); // récupération du texte du <th />
        
    $th.width(w);
    $th.html(
        /* on force la largeur en "px" car les "%" ne seront pas pris en compte
         * quand le <thead /> sera en "position: fixed;"
         */
        $("<div />").text(text).width(w)
    );        
});

... et remplacons :

#results th {
    word-break: break-all;
    
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

... par :

#results th div {    
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

Là nous aurons une bonne configuration .
En l'attente de vos tests...

http://jsfiddle.net/DY23f/3/
Toujours le même soucis, quand on redimensionne la fenêtre et qu'on scroll, le thead devient tout rikiki...

Alors par contre une petite question concernant votre code, pourquoi une balise <div /> ?
il ne faudrait pas "englober" chaque <th>trucmuche</th> par une div telle que :
<div><th>trucmuche</th></div>
?
ça revient au même ?

Ton problème est du au fait qu'une fois ton head retiré du flux , la mise en forme de ton tableau l'ignore totalement.

Une solution, peut-être de re dupliquer ton thead dans un tfoot , de façon a ce que ces contenus soit pris en compte dans le l'affichage de ton tableau.

Petit test en jquery http://jsfiddle.net/DY23f/4/ qui clone le <tr> de <thead> dans <tbody> (effet identique à un <tfoot> qui reprend le contenu d'un <thead>)

++

Bonjour à tous,

@gc-nomade : j'ai testé votre page http://jsfiddle.net/DY23f/4/, mais j'ai rencontré la même problématique sur l'en-tête . Voir copie écran suivante :


La problématique n'est pas liée à la structure HTML, mais à l'application des largeurs aux <th /> par le JS.

@foloxflou : j'ai complété votre code sur cette page http://codepen.io/guiwint/pen/emoiy :
- vous y retrouverez votre tableau, s'adaptant en pourcentage à la largeur de fenêtre.
- l'en-tête se fixe bien en haut de page avec la bonne largeur.

Et à propos de :

foloxflou a écrit :
Alors par contre une petite question concernant votre code, pourquoi une balise <div /> ?
il ne faudrait pas "englober" chaque <th>trucmuche</th> par une div telle que :
<div><th>trucmuche</th></div>
?
ça revient au même ?

... houlala non pas du tout ! Sinon votre validateur HTML W3C vous fera les gros yeux.

Les éléments <table />, <tr />, <td />, <th />, etc, sont des éléments de sémantique "tableau". Une <div /> n'a pas à s’intercaler entre (ou, autre exemple, entre des <li /> dans une liste).

Espérant aboutir à une solution viable pour vous.
En l'attente, bon code ...

Guiwint a écrit :
Bonjour à tous,

@gc-nomade : j'ai testé votre page http://jsfiddle.net/DY23f/4/, mais j'ai rencontré la même problématique sur l'en-tête .
La problématique n'est pas liée à la structure HTML, mais à l'application des largeurs aux &lt;th /&gt; par le JS.

En effet, c'est le point essentiel que je voulais mettre en évidence. Les largeurs de colonnes se calculent ici en fonction de la cellule la plus large, et si elle n'est pas dans le thead en fixed ..

La , presque, seule solution est de se servir de table-layout:fixed; et de width pour chaque colonnes. Le text-overflow:ellipsis redevient aussi utile si l'on veut ne garder qu'une ligne de texte.

Enfin reste le probleme de l'element fixed qui ne suivra pas non plus le scroll horizontal sans que l'on recalcul sa position via js/jQuery.

Il y est presque http://codepen.io/gc-nomade/pen/yeguC
Cdt
Modifié par gc-nomade (27 Jun 2014 - 15:59)

Bonjour !

Excusez moi j'ai completement zapé de vous répondre..

Un énorme merci pour l'energie déployé sur mon cas.
Cependant, sur tous vos exemple je rencontre le même problème lorsqu'on redimensionne la taille de la fenêtre... c'est vraiment étrange !

Une question à Guiwint :
que ciblez vous en css avec "#results th div" ?
Modifié par foloxflou (25 Jul 2014 - 15:18)