Bonjour,
afin de béneficier des fonctionnalités d'un plugin jquery spécifique au table (trie; filtre sort) je me demandais si on pouvais transformer via css un tableau de ce style :
en cela :
en vous remerciant
Bonjour,
afin de béneficier des fonctionnalités d'un plugin jquery spécifique au table (trie; filtre sort) je me demandais si on pouvais transformer via css un tableau de ce style :
en cela :
en vous remerciant
Bonjour,
tu peux toujours arrivé à tes fins avec un positionnement absolute mais est ce que le jeu en vaut la chandelle la présentation n'ayant plus rien à voir avec des données tabulaire peut être devrais tu reconsidérer tes solutions d'affichage.
Bonjour,
ce n'est pas compliqué :
Pour smartphone (par exemple), ajouter :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 <table> <tr class="ligne"> <td class="titre">titre1</td> <td class="date">date1</td> <td class="resume">resume1</td> </tr> <tr class="ligne"> <td class="titre">titre2</td> <td class="date">date2</td> <td class="resume">resume2</td> </tr> <tr class="ligne"> <td class="titre">titre3</td> <td class="date">date3</td> <td class="resume">resume3</td> </tr> </table>
si la structure est bien définie, on peut se passer de dupliquer des class. On utilise td:nth-child(x) : http://codepen.io/jreaux62/pen/doGpGK
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 table td { padding:10px; margin:10px; } table tr.ligne { display:block; clear:both; } table td.titre { display:block; float:left; } table td.date { display:block; float:right; } table td.resume { display:block; float:none; clear:both; }
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 <table class="responsive-table"> <tr> <td>titre1</td> <td>date1</td> <td>resume1</td> </tr> <tr> <td>titre2</td> <td>date2</td> <td>resume2</td> </tr> <tr> <td>titre3</td> <td>date3</td> <td>resume3</td> </tr> </table>Pour aller plus loin, en jQuery :
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 .responsive-table td { padding:10px; margin:10px; } .responsive-table tr { display:block; clear:both; } .responsive-table td:nth-child(1) { display:block; float:left; } .responsive-table td:nth-child(2) { display:block; float:right; } .responsive-table td:nth-child(3) { display:block; float:none; clear:both; }
Code js : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 /* Rendre une table responsive sur smartphone */ $(window).on( 'load resize', function(){ if( $(window).width()<480 ) { $('.normal-table').addClass('responsive-table'); } else { $('.normal-table').removeClass('responsive-table'); } });
Dernière modification par Invité ; 08/05/2015 à 20h25.
Merci, le rendu est vraiment impressionnant !
juste une question complèmentaire
y'a t'il possibilité de rajouter une colonne pour integré un thumbnail (center sur la hauteur de la ligne ou qui prend toute la hauteur de la ligne)
comme ceci :
Un grand merci en tout cas.
Bonjour,
la réponse est encore OUI.
Maintenant que tu connais le principe... à toi de jouer !
re bonjour,
j'ai justement essayer , mais j'ai du mal :
j'ai rajouter 2 champ au dessus du resumé en plus de la colonne thumbnail
du coup pour faire mon effet j'ai du virer le clear:both du .résumé
j'arrive a faire en sorte que le thumbmail soit sur le coté, (en ajoutant sur les autre td un clear:right mais du coup les champ auteur,1 auteur2 et resumé se retrouve aligné au lieu d'etre l'un en dessous de l'autre.
si je met un clear:both l'alignement est bon mais le thumbail n'est plus sur le coté.
On ne peut pas apprendre à ta place :
[EDIT] Cadeau ! j'ai actualisé mon code : http://codepen.io/jreaux62/pen/doGpGK
Dernière modification par Invité ; 09/05/2015 à 16h28.
Un grand merci jreaux62 !!!
j'ai de quoi faire avec ça
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager