[Résolu] Changer la forme d'une table (le header)

Bonjour j'ai un problème, et je bloque depuis plusieurs jours dessus, pas moyen d'y arriver.

J'ai créé une table simple, dans laquelle j'ai placé dans chaque header de la table un bouton.

<thead>
<tr>
<th><div id="bouton1"> <input type="button" value="bouton1"></div></th>
<th> <div id="bouton2"><input type="button" value="bouton2"></div></th>
<th> <div id="bouton3"><input type="button" value="bouton3"></div></th>
</tr>
</thead>

(Ces boutons tris le contenu des colonnes à l'aide d'un script .js)

Je veux que ces boutons se placent dans le header de la colonne de gauche et qu'il n'y ai pas de déplacements de ces boutons si l'on diminue la fenêtre de l'écran. Tout doit rester bien en place.

Il me semble qu'il faut joué sur "inline block" mais je vois pas comment faire..

Voici un exemple dessin pour vous décrire plus simplement le problème:


Merci d'avance:!
Modifié par Xan (14 Apr 2016 - 14:38)

Bonjour !

Je n'ai pas compris votre problème : vous voulez que les boutons soient dans la colonne de gauche? Mais vous mettez chacun dans une colonne.

Et quel est l'intérêt de ces divs ?

Salut,

Si je comprends bien le souci il faudrait utiliser les attributs "colspan" et "rowspan".
Plein d'exemples pour voir comment ça fonctionne sur cette page : http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html

Sinon, je t'ai fait un Pen ici : http://codepen.io/korell/pen/aNYqGV?editors=1100

Zelena a écrit :
Bonjour !

Je n'ai pas compris votre problème : vous voulez que les boutons soient dans la colonne de gauche? Mais vous mettez chacun dans une colonne.

Et quel est l'intérêt de ces divs ?

Bonjour, merci de votre réponse
Enfaite, le script de tri (.js) agit sur les headers de chaque colonne, je place un bouton dans chaque de ces headers pour que lorsque l'on clique dessus cela fasse le tri ( et cela fonctionne), cependant visuellemment je veux que ces boutons soient alignés à gauche et non pas dans leur colonne respective à droite.
Bien sûr si je met 3 boutons dans la colonne de gauche, les tris ne marchent plus.

MatthieuR a écrit :
Salut,

Si je comprends bien le souci il faudrait utiliser les attributs "colspan" et "rowspan".
Plein d'exemples pour voir comment ça fonctionne sur cette page : http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html

Sinon, je t'ai fait un Pen ici : http://codepen.io/korell/pen/aNYqGV?editors=1100

Bonjour, merci de ta réponse

Je viens de voir ton code, ça à l'air super! Je vais testé tout ça
je connaissais pas ces attributs

Merci à toi

Hum... peut-être qu'il faut changer le script pour qu'il n'agisse pas sur les 'th' (appeler ça des 'headers' ajoute de la confusion) mais sur les boutons... ce qui est beaucoup plus logique et plus souple.


Edit : j'ai pensé à 'colspan' mais avec ça on n'a plus qu'un seul 'th' ce qui risque d'être problématique pour le script, non ?

Modifié par Zelena (14 Apr 2016 - 11:35)

Zelena a écrit :
Hum... peut-être qu'il faut changer le script pour qu'il n'agisse pas sur les 'th' (appeler ça des 'headers' ajoute de la confusion) mais sur les boutons... ce qui est beaucoup plus logique et plus souple.


Edit : j'ai pensé à 'colspan' mais avec ça on n'a plus qu'un seul 'th' ce qui risque d'être problématique pour le script, non ?

C'est vrai je viens de réaliser que ça peut pas fonctionner vu qu'il n'y a que un th

Le script est bien trop complexe (plusieurs milliers de lignes de code que j'ai pris directement sur internet (plugin jquery))
Modifié par Xan (14 Apr 2016 - 11:41)

Dans ce cas, je ne sais pas : trouver un autre script, faire deux tableaux...

Dépendre d'un script si spécifique est problématique.

Zelena a écrit :
Dans ce cas, je ne sais pas : trouver un autre script, faire deux tableaux...

Dépendre d'un script si spécifique est problématique.

Oui, je pense chercher un autre script qui s'adaptera au code de Mathieu avec colspan etc.. , merci en tout cas

En effet, je n'avais pas fait attention à ton besoin d'avoir les bouton dans un <th> correspondant à tes colonnes.
Comme le dit Zelena, il faudrait pouvoir attacher les événements sur les boutons eux-mêmes et non pas seulement dans l'ordre de tes colonnes.
Quelle est la librairie que tu utilises ? Il y a sans doute un système de "déport" des actions.

MatthieuR a écrit :
En effet, je n'avais pas fait attention à ton besoin d'avoir les bouton dans un &lt;th&gt; correspondant à tes colonnes.
Comme le dit Zelena, il faudrait pouvoir attacher les événements sur les boutons eux-mêmes et non pas seulement dans l'ordre de tes colonnes.
Quelle est la librairie que tu utilises ? Il y a sans doute un système de "déport" des actions.

Pas de soucis J'utilise ce script: https://raw.githubusercontent.com/javve/list.js/v1.2.0/dist/list.js

Mais je pense que ca doit être possible en gardant ce script , je crois avoir une piste en utilisant "display-block" sur les th, je vais continué de faire des tests .

Hello,

Pourquoi ne pas changé le display du th ?
http://codepen.io/anon/pen/XdEqpL?editors=1100

Pas contre, le border du <table> se coupe chez moi... Aucune idée de la raison

Yordi a écrit :
Hello,

Pourquoi ne pas changé le display du th ?
http://codepen.io/anon/pen/XdEqpL?editors=1100

Pas contre, le border du &lt;table&gt; se coupe chez moi... Aucune idée de la raison

Oui, je viens de le faire, j'utilise "display:inline-block; " :
table, th{
display:inline-block;
border-spacing:0;
}
et ça marche apparement

Dire que j'ai passé des jours dessus
(oui bizzare que ca se coupe chez toi )

Yordi a écrit :
Hello,

Pourquoi ne pas changé le display du th ?
http://codepen.io/anon/pen/XdEqpL?editors=1100

Pas contre, le border du &lt;table&gt; se coupe chez moi... Aucune idée de la raison

Oui, je viens de le faire, j'utilise "display:inline-block; " :
table, th{
display:inline-block;
border-spacing:0;
}
et ça marche apparement

Dire que j'ai passé des jours dessus
(oui bizzare que ca se coupe chez toi )

Edit: enfait peut être que ca se coupe chez moi mais je ne met pas de bordure de table autour des boutons donc voila et c'est plus classe comme ça
Modifié par Xan (14 Apr 2016 - 14:47)

Je viens de voir la lib List.js et elle est bien cool !
Et aucun souci pour attacher un événement à un bouton précis.
Rien que sur la page d'accueil tu as tout ce qu'il te faut : http://www.listjs.com/
Il faut ajouter des classes aux différents éléments.
J'ai mis à jour mon pen : http://codepen.io/korell/pen/aNYqGV

MatthieuR a écrit :
Je viens de voir la lib List.js et elle est bien cool !
Et aucun souci pour attacher un événement à un bouton précis.
Rien que sur la page d'accueil tu as tout ce qu'il te faut : http://www.listjs.com/
Il faut ajouter des classes aux différents éléments.
J'ai mis à jour mon pen : http://codepen.io/korell/pen/aNYqGV

Bravo c'est tout à fait ça ( dire que moi j'y ai passé 4 jours )
Merci à tous pour votre aide et vos réponses rapides