Définir les styles de spans dans une cellule de tableau

**samalairbien** · 01/07/2009, 20h47

Bonsoir,

Je suis débutant en feuille de styles CSS et je bloque sur un problème de dimensionnement de spans dans une cellule de tableau. (Je ne sais d'ailleurs même pas quel préfixe indiquer dans ce post - CSS 2, 2.1 ou 3

)

Voici ma page html:

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<LINK rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<table>
	<colgroup>
		<col style="width: 300px" />
		<col style="width: 300px" />
		<col style="width: 300px" />
		<col style="width: 300px" />
	</colgroup>
	<tbody>
		<tr>
			<td><span class="titre">Titre 1 : </span><span class="donnee">donnée 1</span></td>
			<td><span class="titre">Titre 2 : </span>
				<span class="donnee">
					<select id="select1">
						<option selected>Première entrée</option>
<!--					<option id="optionLongue">Entrée qui dépasse vraiment la taille de la ligne</option>  -->
						<option>Deuxième entrée</option>
						<option>Troisième entrée</option>
					</select>
				</span>
			</td>
			<td><span>Titre 3 : </span><span>donnée 3</span></td>
			<td><span>Titre 4 : </span><span>donnée 4</span></td>
		</tr>
		<tr>
			<td><span>Un autre titre1 : </span><span>donnée 1</span></td>
			<td><span>Un autre titre2 : </span><span class="donnee">
					<select id="select2">
						<option>Première entrée</option>
<!--					<option>Entrée qui dépasse vraiment la taille de la ligne</option>  -->
						<option selected>Deuxième entrée</option>
						<option>Troisième entrée</option>
					</select>
				</span></td>
			<td><span>Un autre titre3 : </span><span>donnée 3</span></td>
			<td><span>Un autre titre4 : </span><span>donnée 4</span></td>
		</tr>
	</tbody>
</table>
 
</body>
</html>

Et ma feuille de styles:

Code :

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

1
2
3
4
5
6
7
8
9
 
span.titre {
	font: 14px Verdana; 
	font-weight: bold;
}
 
span.donnee {
	width: 100%;
}

Voilà ce que je souhaite faire.
Chaque cellule est composée de deux blocs span "span1" et "span2". Le premier a pour classe "titre" et le deuxième "donnee". La largeur de ma colonne doit être fixe (300px). Je souhaite que "span1" prenne la largeur dont il a besoin, et que "span2" prenne le reste.
Quand les contenus de "span1" et "span2" sont du texte, il n'y a pas de problème : tout se fait tout seul. Mais voilà, "span2" contient souvent un élément "select". Et je ne sais pas comment faire pour que cet élément select ait (automatiquement d'après la CSS) pour largeur la taille de la colonne - la taille du span1.
Typiquement, on voit bien dans mon exemple que select1 et select2 ne prennent pas la place qu'il reste dans la cellule. Encore pire : lorsque "optionLongue" est dans la liste, le select prend la taille maximale, ce qui provoque un retour à la ligne dans la cellule.

Voilà, j'espère que vous pourrez m'aider. Je vous en remercie d'avance.

**emie7** · 03/07/2009, 04h04

Salut,

la balise span est une balise de type inline même si tu lui donne des dimensions rien ne va changer.

pour pouvoir le faire il faut la convertir en une balise de type bloc avec display: block;
et là y aura un autre problème c'est qu'elles ne seront pas alignée après ça

pour régler le problème tu mets float: left;

Code :

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

1
2
3
4
5
6
span {
   display: block;
   float: left;
   width: XXpx;
   height: XXpx
 }

Définir les styles de spans dans une cellule de tableau

Tableau en CSS

Discussions similaires

Partager

Partager