Discussion :

[Irunic]

Bonjour à tous,

Je présente rapidement le contexte de mon problème :
Il s’agit d’une page html type template à partir de laquelle je peux charger un certain nombre de tableau : en cliquant sur le lien (à gauche, sous le menu), je charge un tableau dans la partie droite de la page.

Mon problème :
Le thead fix (le thead de fixTable) ne conserve pas les dimensions de la div parente, à savoir (div id display). Il dépasse de la div. Je pense que le problème réside dans une histoire de width car lorsque la taille de fenêtre est plus petite, Bootstrap passe le tableau sur la taille de la fenêtre complète et là, le thead se retrouve bien positionné. (voir les deux photos)

Cas 1 : sur grand écran, le thead est bien fixe mais "déborde" de la div


Cas 2 : sur petit écran, tout est parfait (thead fixe et aligné avec le vrai tableau, il coulisse bien avec la barre de défilement horizontale)


Comment avoir le résultat obtenu sur les petits écrans tout le temps ? Comment forcer le thead à être contenu par la div globale (la div d’id display) Auriez-vous une solution à mon problème ?

PS : Pour info, dans mon projet, je ne peux utiliser ni du php, ni de l’ajax.


En pièces jointe les différents liens vers mon code. J'ai essayé de le simplifier au maximum pour ne conserver que ce qu'il posait problème

Code HTML template : template.html
Code HTML tableau : tableToImport.html
Code JS : script.js
Code CSS : style.css

En espérant obtenir une réponse sur ce problème qui me préoccupe depuis quelques semaines, je vous remercie d'avance pour votre aide.