Thead fixe sur tableau HTML

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
Pièce jointe 362276

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)
Pièce jointe 362275

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 : Pièce jointe 362292
Code HTML tableau : Pièce jointe 362288
Code JS : Pièce jointe 362284
Code CSS : Pièce jointe 362283

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.