Discussion :

[patdu26]

bonjour à tous,

j'ai réalisé un tableau de 2 cellules. Chaque cellule contient un titre (pour le moment, le titre est un nombre qui indique l'index de la colonne créée) et une image.

le css de départ est :

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
21
22
23
24
25
26
table { 
  position : relative;
  z-index: -1;
  top : 120px;
  left : 200px;
 
 
  border-collapse: separate; /* les cellules sont déliées les unes des autres */
  border-spacing: 40px ;    /* espaces de 20px sur x et 0 sur y */
  color : white;
  border : 2px solid white;
 
}
 
td {
  width: 120px;
  height: 200px;  padding: 10px;
 
 /* display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;*/
 
  background-color: darkgrey;
  border : 2px solid red;
}

le rendu est :


Afin d'avoir un rendu correct dans chaque cellule td, je souhaite un positionnement horizontal du titre en haut et de l'image en bas, avec un espace entre les deux.
Pour cela je rajoute à mon css, la partie laissée en commentaire précédemment.

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
21
22
23
24
25
26
table { 
  position : relative;
  z-index: -1;
  top : 120px;
  left : 200px;
 
 
  border-collapse: separate; /* les cellules sont déliées les unes des autres */
  border-spacing: 40px ;    /* espaces de 20px sur x et 0 sur y */
  color : white;
  border : 2px solid white;
 
}
 
td {
  width: 120px;
  height: 200px;  padding: 10px;
 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
 
  background-color: darkgrey;
  border : 2px solid red;
}

Le rendu devient :



L'affichage dans chaque cellule est satisfaisant, mais , le problème est que l'alignement vertical, demandé pour l'intérieur des cellules, s'est propagé au delà du contenu de chaque cellule, à l'alignement des cellules elles-mêmes!!

Pourquoi cet alignement vertical du contenu de chaque cellule, s'est-il propagé à l'alignement des conteneurs cellules?

Comment conserver cet alignement interne dans les cellules, sans affecter le fait que les cellules restent alignées horizontalement, comme dans un tableau normal en fait???

Merci à tous...

[PrincessLoiseau]

Ne devrais-tu pas avoir :

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
18
19
20
21
22
23
24
<table>
  <tr>
    <td>
           <table>
              <tr><td></td></tr>
              <tr><td align="center">titre</td></tr>
              <tr><td></td></tr>
              <tr><td align="center">image</td></tr>
              <tr><td></td></tr>
            </table>
    </td>
 
    <td>
           <table>
              <tr><td></td></tr>
              <tr><td align="center">titre</td></tr>
              <tr><td></td></tr>
              <tr><td align="center">image</td></tr>
              <tr><td></td></tr>
            </table>
    </td>
 
  </tr>
</table>

et jouer avec la hauteur des lignes ? ( pas sur du valign fonctionnel )

https://chatinais.pagesperso-orange....u/framalig.htm

Ou directement construire en <div> et ainsi ne pas mélanger <table> et <div> style.

Bon maintenant si il y a bien deux <td> dans un <tr> ?

Code :

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

border-spacing: 40px ;    /* espaces de 20px sur x et 0 sur y */

=
Lors de l'utilisation de border-collapse: separate, la propriété border-spacing peut être utilisée pour définir l'espace entre les cellules :

Code :

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

border-spacing: 40px ;    /* espaces de 40px  en haut, en bas, à gauche, à droite, et entre */

[patdu26]

Bonsoir et merci pour les pistes proposées.

Pour le moment j'en suis revenu à des "div", et cela fonctionne comme désiré...

Je vais bien sur parcourir les aides proposées pour progresser.

bonne soirée.