Discussion :

[Julien698]

Bonjour,

Je suis en train de réaliser une application qui nécessite l'utilisation d'un tableau pour mettre en place un formulaire. Mais seulement je rencontre des soucis vis à vis de la taille des cellules.
Mon formulaire est deux parties distinctes et il y a un titre avant chacune de ces parties.

Voici un exemple pour illustrer le problème:

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
<table>
	<tbody>
        <tr>
                <td style="width:165px; font-size:smaller;"; >Mon titre</td>
        </tr>
	<tr>
		<td class="left-cells"></td>Etape 1<td class="middle-cells">Champ 1</td><td class="right-cells">TextBox</td>
	</tr>
	<tr>
		<td class="left-cells"></td>Etape 2<td class="middle-cells">Champ 2</td><td class="right-cells">Bouton</td>
	</tr>
	<tr>
                <td>Mon titre2</td>
        </tr>
	<tr>
		<td class="left-cells"></td>Etape 3<td class="middle-cells">Champ 3</td><td class="right-cells">TextBox3</td>
	</tr>
	</tbody>
</table>

J'applique la classe CSS left-cells sur chacune des lignes qui ont plusieurs cellules mais elle ne semble pas être prise en compte. Je m'explique : lorsque je modifie la taille de la cellule où il y a "Mon titre" toutes les premières cellules (celles avec la classe left-cells) prennent cette valeur alors qu'elle doivent être plus petites que celle du titre et je ne comprends pas pourquoi.

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
.left-cells 
        {
            width:100px;
            display:table-cell;
            margin-left:13px;
 
 
        }
 
.middle-cells 
        {
            width: 220px;
            display:table-cell;
        }
 
.right-cells 
        {
            display:table-cell
        }

Voici mon code CSS, je précise que j'ai essayé aussi display en block et inline-block mais j'obtiens le même résultat. Après m'est passé l'idée de mettre un colspan au niveau du titre en ajoutant volontairement le même nombre de cellules que sur les autres lignes mais ça ne marche pas non plus.


Est-ce possible de faire ceci ? Peut-être que je m'y prend mal ? Avez-vous des idées ?
Merci

[NoSmoking]

Bonjour,
c'est le comportement normale des tables dont les cellules s'adapte au contenu.

⚫ Pour commencer ton code est non valide, donc le rendu est selon le bon vouloir du navigateur.

⚫Pour poursuivre, dans ton cas tu pourrais trouver avantage à passer par des <fieldset> ou autre <legend> pour structurer ton formulaire.

[Invité]

Bonjour,
je plussois NoSmoking :

1/

Code :

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

1
2
3
	<tr>
		<td class="left-cells"></td>Etape 2<td class="middle-cells">Champ 2</td><td class="right-cells">Bouton</td>
	</tr>

bien indenté ça donne :

Code :

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

1
2
3
4
5
6
	<tr>
		<td class="left-cells"></td>
		Etape 2
		<td class="middle-cells">Champ 2</td>
		<td class="right-cells">Bouton</td>
	</tr>

On voit que "Etape 2" est en dehors du <td>...</td>

2/ Pour le titre, sur plusieurs colonnes (fusion de cellules) :

Code :

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

1
2
3
	<tr>
		<td colspan="3">titre</td>
	</tr>

Donc, à lire d'urgence :

• Les tableaux (XHTML & CSS)