Discussion :

[markham]

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

[NoSmoking]

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.

[Invité]

Bonjour,
ce n'est pas compliqué :

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>

Pour smartphone (par exemple), ajouter :

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;
}

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 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>

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;
}

Pour aller plus loin, en jQuery :

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');
    }
});

[markham]

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.

[Invité]

Bonjour,
la réponse est encore OUI.

Maintenant que tu connais le principe... à toi de jouer !

[markham]

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é.