Discussion :

[Gilles_75]

Bonjour

Sur une de mes pages web
http://jevoyagefacile.com/trouvez-vo...ide/en-france/
J'ai une table avec n lignes et sur chaque ligne 3 colonnes
Voici le code en résumé

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
<table style="width: 100%;">
<tbody>
<tr>
<td rowspan="1"></td>
<td align="left">
</td>
</tr>
<tr>
<td rowspan="3"></td>
<td align="left">AAAAAA</td>
<td align="left">BBBBBBB</td>
<td align="left">CCCCCC</td>
</tr>
</tbody>
</table>

J'aimerais pouvoir réduire comme je le désire l'espace entre les colonne pour pouvoir en rajouter une et que la page
reste visible dans son intégralté sans scroll vers la droite
Mais également laisser responsive mon site sur mobile et Tablet

Merci pour votre aide

Gilles

[Invité]

Bonjour et bienvenu sur DVP,

dans ton cas, il n'est pas judicieux d'utiliser les <table>, car elles ne servent plus (depuis longtemps !) à la mise en page.

Ici, des <div> seraient plus appropriée, avec l'utilisation de flexbox (display:flex

• Redécouvrez la mise en page avec Flexbox

[Gilles_75]

Merci pour votre réponse
Vous pourriez me donner un exemple ?
Par exemple 1 table avec 3 colonnes

Merci

[Invité]

Bien sûr :

[Gilles_75]

Oui bien sur vous avez raison.
J'y suis presque.
Tout fonctionne parfaitement comme je le voulais, ou presquer
Voici mon code

Code :

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

1
2
3
4
5
6
<div class="flex-container">
<div class="flex-item">ZZZZZZ</div>
<div class="flex-item">AAAAAA</div>
<div class="flex-item">BBBBBB</div>
<div class="flex-item">CCCCCC</div>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.flex-container {
    display: -webkit-flex  !important;
    display: flex   !important;
    width: 100%   !important;
    height: 21.875rem !important;
    overflow-x: auto  !important;
}
 
.flex-item {
    width: 18.75rem  !important;
    height: 6.25rem  !important;
    margin: 1.38rem !important;
}

Le résultat est plus ou moins correct sur tous les navigateurs ainsi que sur les mobiles.

Le souci est que sur ma tablette les flex-item se superposent les unes sur les autres au lieu de laisser un espace

Auriez-vous une idée ?

Merci pour votre aide

[Invité]

• Indique plutôt les largeurs en %.
• utilise les media queries pour modifier le comportment sur tablet / phone (ex. 3 2, ou par ligne)

N.B. Pourquoi mets-tu systématiquement !important ?

[Invité]

Exemple :

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
19
20
.flex-container {
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
}
 
.flex-item {
  box-sizing: border-box;
  flex: 0 1 32.33%;
  height: 6.25rem;
  margin: 10px 0.5%;
  border: red 1px solid;
}
 
@media screen and (max-width:768px) {
	.flex-item { flex: 0 1 49%; }
}
@media screen and (max-width:640px) {
	.flex-item { flex: 0 1 99%; }
}

Voir :

• flex-wrap
• flex-flow
• box-sizing
• flex

N.B. Penser à ajouter les préfixes, si nécessaires : -webkit-,...

[Gilles_75]

Je n'utilise pas % car sinon j'ai la scrollbar qui apparait et je n'ai pas tout sur la même page 25% en occurrence pour 4 collones
que voulez-vous dire par (ex. 3 2, ou par ligne) ?
!important c'est une recommandation wordpress et de mon théme

[Invité]

Regarde mon code...

Et il faut absolument que tu supprimes les overflow:auto; : c'est TRES LAID !

N.B Et ça s'écrit "colonne" !

[Gilles_75]

Merci encore pour toutes ces infos et surtout ta grande réactivité

Je vais étudier

Code :

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

1
2
3
4
5
6
@media screen and (max-width:768px) {
	.flex-item { flex: 0 1 49%; }
}
@media screen and (max-width:640px) {
	.flex-item { flex: 0 1 99%; }
}

Pour l'instant ça ne me parle pas du tout
A quoi correspondent les 3 chiffres successifs 0 1 49% ?
@media screen and (max-width:768px) est pour les tablets et @media screen and (max-width:640px) pour les mobiles ?

[Invité]

Je t'ai mis des liens. LIS !

+ "media queries"

[Gilles_75]

et pourquoi
overflow:auto; est-ce laid ?
c'est bien utile, non ?

[Invité]

Ca ajoute des barres de scroll supplémentaires et superflues...
-> inutiles si le script est bien conçu : passage à la ligne automatique, media queries (pour modifier la mise en page),....

[Gilles_75]

Je suis toujours sur mon souci d'affichage de mon flex et sa compatibilité sur ipad
Ma page est la suivante
http://jevoyagefacile.com/trouvez-vo...ide-en-france/

fonctionne bien sur web et iphone mais sur ipad les flex iem se superposent
le code css est le suivant

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
18
19
20
.flex-container {
    display: -webkit-flex  !important;
    display: flex   !important;
    width: 100%   !important;
    height: 21.875rem !important;
    overflow-x: auto  !important;
 
}
 
.flex-item {
    width: 18.35rem  !important;
    height: 6.25rem  !important;
    margin: 1.38rem !important;
}
 
@media screen and (max-width:768px) {
	.flex-iem { flex: 0 1 49%  !important; }
}
@media screen and (max-width:640px) {
	.flex-item { flex: 0 1 99% !important; }

Merci pour votre aide

[a.brice]

tu peux mettre comme attribut de table cellspacing="o" pour enlever ces espaces qu'il y'a entre les colonnes