[Résolu] Aligner colonnes thead et tbody

Bonsoir à tous !

J'ai besoin de vous pour un tableau qui me rend folle...
Je voulais faire un scroll vertical en fixant le <thead> et ça fonctionne, seulement il m'est maintenant impossible d'aligner les colonnes avec leurs entêtes respectives, et j'ai essayé pas mal de choses...

Je vous mets le CSS qui gère mon tableau, mon <thead> et mon <tbody>, des fois que ça puisse vous éclairer

table{
	text-align:center !important;
	cellspacing:0px !important;
	cellpadding:0px !important;
	table-layout:fixed !important;
	display:block !important;
	max-width:1300px !important;
}
thead{
	display:block !important;
	table-layout:fixed !important;
	position:relative !important;
	padding: 0 16px 0 0 !important;
	column-width:150px !important;
}
tbody{
	max-height:400px !important;
	display:block !important;
	overflow:auto !important;
	table-layout:fixed !important;
	column-width:150px !important;
}

Petite précision (mais de taille), le reste de ma mise en page est gérée par Bootstrap (d'où tous les "!important", donc je me dis que ça peut aussi venir de là...

Enfin bref, si quelqu'un a une idée de ce à quoi ça peut être dû, je suis preneuse
Merci !
Modifié par Anaay (23 Feb 2015 - 21:14)

Aurais-tu un exemple en ligne ?

Bonjour,

Alors il n'est pas accessible en ligne, mais voilà le genre de rendu que j'ai (mais les nombres de colonnes et de lignes sont variables) :



Mon code a évolué depuis hier, voilà à quoi il ressemble maintenant :

table{
	text-align:center !important;
	cellspacing:0px !important;
	cellpadding:0px !important;
	table-layout:fixed !important;
	display:block !important;
	max-width:1300px !important;
}
thead{
	display:block !important;
	table-layout:fixed !important;
	position:relative !important;
	padding: 0 16px 0 0 !important;
}
tbody{
	max-height:400px !important;
	display:block !important;
	overflow:auto !important;
	table-layout:fixed !important;
}
.prod{
	width:250px !important;
	overflow-wrap: break-word !important;
	padding:3px !important;
	max-width:250px !important;
}
.pasprod{
	width:150px !important;
	overflow-wrap: break-word !important;
	padding:3px !important;
	max-width:150px !important;
}

Merci
Modifié par Anaay (24 Feb 2015 - 10:31)

Bonjour et bienvenue,

on va pas y arriver parce que c'est de la divination là, avec du Bootstrap et du CSS perso (avec de très vieilles propriétés dont je ne suis pas sûr qu'elles aient un effet) dans un tableau bien complexe mais sans mise en page en tableau...

Tu peux utiliser http://codepen.io/pen/ en ajoutant dans les paramètres CSS la feuille externe de Bootstrap: //maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
et simplifier ton problème tout en le reproduisant.

cellspacing et cellpadding sont-elles des propriétés qui ont un effet ?
Pourquoi du table-layout: fixed (qui active l'autre type de rendu des tableaux) si c'est pour forcer un affichage de type block sur ces mêmes tableaux ?
Que deviennent les cellules td : sont-elles toujours en table-cell ?
max-width a un effet vu qu'on a display: block et pas table-qqch, ça OK.

EDIT:

a écrit :
Je voulais faire un scroll vertical en fixant le <thead> et ça fonctionne

Si j'apprenais à lire un énoncé... Mmh il faudrait que tu fixes les largeurs sinon ça va être difficile. Et s'il y a des bordures, elles rajoutent 1 ou 2px aux largeurs des "cellules" (des blocs) à moins de passer en modèle box-sizing: border-box;
Modifié par Felipe (24 Feb 2015 - 10:50)

Merci beaucoup (pour le "bienvenue" et pour toutes ces infos ) !

J'ai peur de ne pas tout comprendre... En testant, cellspacing et cellpadding n'ont aucun effet, en les commentant l'affichage reste le même...

Et fixer la largeur des cellules, effectivement, c'est ce que je tente désespérément de faire
J'ai créé les deux class (prod et pasprod), elles ont un effet, mais sur les cellules du <tbody> seulement, que je les commente ou non, les cellules du <thead> ne bougent pas alors que les classes y sont aussi appliquées. Et les cellules du <tbody> sont modifiées, mais n'ont pas la taille fixée.

Pour box-sizing, je le mets dans quelle partie ? Doit-il remplacer quelque chose ? (J'ai testé de le mettre partout et rien ne change...)

J'aimerais bien pouvoir tester mon code dans Codepen, seulement mon tableau se construit selon les choix des utilisateurs, il est quasiment différent à chaque fois...

Merci encore de ton aide.


EDIT :

Ca maaarche !
J'ai forcé la taille en définissant le max-width et min-width à la même taille, et ça a l'air de tenir ! C'est peut-être un peu bricolé, mais ça fait le job ! Maintenant, il me reste à trouver comment comprendre les scripts que je trouve pour synchroniser deux scrollbar... Merci encore
Modifié par Anaay (24 Feb 2015 - 12:51)

Résolu