Discussion :

[X260SH]

Bonsoir,

Je construit en ce moment une petite appli web dans laquelle je suis forcer d'utiliser de nombreux tableaux. Je cherche également à rende ce site accessible aux terminaux mobiles. Je cherche donc une solution CSS pour renvoyer automatiquement un tableaux à la ligne.
Par exemple, j'ai un tableau de 12 colonnes par 3 lignes. Je cherche à ce que sur de plus petits écrans, il soit transformé en tableau de 6 x 6.
L'intéret, ici, ça serait par exemple, pour présenter les personnage d'un film : 1ère ligne, une photo, 2ème ligne, le nom, 3ème ligne, leur age. Chaque personnage est donc un "groupe" de 1 colonne x 3 lignes, qu'il n'est absoluement pas génant de trouver sur une seule, deux, voir meme trois grande ligne.
Voilà mon code : http://codepen.io/anon/pen/gfise/.

[NoSmoking]

Bonjour,
oublie l'utilisation de TABLE dans ce cas et passe par les nouvelles balises telle que SECTION, par exemple, disponible en HTML5 que tu pourra faire "floatter".

[X260SH]

Hmm... Pas bête ! Et dans ce cas, une section par "cellules" ?

[EDIT] Voilà ce que j'ai fait en suivant vos conseils : http://codepen.io/anon/pen/JefvI/. Est ce que ça vous semble correcte ? J'ai préféré remplacer le "float" par un display:inline-block. Plus facile de gérer l'alignement, après.

[NoSmoking]

Tu aurais pu franchir un pas de plus en utilisant les balises figure et figcaption dans tes section

J'ai préféré remplacer le "float" par un display:inline-block.

c'était le sens de "floatter" entre guillemets, avec la seule restriction que les éléments en inline-block sont soumis à un whitespace alors que les float non, il s'alignent suivant les margin définies.

[CCyrillus]

bonjour,
pour rester dans l'idée initilale d'un layout en table , transposable a du display:table/block, ou float afin de controler le nombre de colonnes/element a afficher cote à cotes :

C'est betement de faire 2 conteneurs , pour un tableau, on le passe en display:inline-table ou float:
http://codepen.io/anon/pen/CipBz/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
td
{
  border:1px solid black;
  padding:3px;
  text-align:center;
}
 
table
{
  border-collapse:separate;
  border-spacing:10px 2px;
  display:inline-table;
  margin-right:-10px;/* on rattrape l'ecartement si il sont cotes à cotes*/
}