Diminuer l'espace entre les colonnes dans une Table

**Gilles_75** · 30/04/2017, 11h53

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é · 30/04/2017, 12h11

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** · 30/04/2017, 13h17

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

Merci

Invité · 30/04/2017, 13h33

Bien sûr :

**Gilles_75** · 30/04/2017, 18h43

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