Définir la taille des <td>

Version imprimable

Bonjour a tou(te)s,
Voici le petit problème du jour:
j'ai un tableau dans lequel sont affichés des textes de taille variable (format date ou texte). Je voudrais élargir mes <td> contenant du texte.
Le code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<table border="1">
	<tr>
		<td class="tab_intitule_admin" title="ID">
		ID
		</td>
		<td class="tab_intitule_admin" title="Date de cr&eacute;ation">
		Date de</br>cr&eacute;ation
		</td>
		<td class="tab_intitule_admin" title="Titre">
		Titre
		</td>
		<td class="tab_intitule_admin" title="Description" width="100px">
		Texte
		</td>...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<tr class="'.$class_ligne.'">
		<td class="tab_cellule_admin" title="ID">
		'.$liste[$i][0].'
		</td>
		<td class="tab_cellule_admin" title="Date">
		'.$liste[$i][15].'
		</td>
		<td class="tab_cellule_admin" title="Titre">
		'.html_entity_decode(stripslashes($liste[$i][10]), ENT_QUOTES, 'ISO-8859-15').'
		</td>
		<td class="tab_cellule_admin" title="Description" width="100px">
		'.html_entity_decode(stripslashes(trim($liste[$i][11])), ENT_QUOTES, 'ISO-8859-15').'&nbsp;
		</td>....

Et dans le css (sait-on jamais):

Code:

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
tr.tab_ligne_ok {
	background-color: none;
}
 
tr.tab_ligne_pb {
	background-color: red;
}
 
tr.tab_ligne_non_accepte {
	background-color: pink;
}
 
tr.tab_ligne_non_confirme {
	background-color: yellow;
}
 
td.tab_intitule_admin {
	margin: 0;
	padding: 0 10px 0 10px;
	padding-left: 10px;
 
	color: #000000;
	font-size: 11px;
	font-style: normal;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-weight: bold;
}
 
td.tab_cellule_admin {
	margin: 0;
	padding: 0 10px 0 10px;
	padding-left: 10px;
 
	color: #000000;
	font-size: 11px;
	font-style: normal;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-weight: normal;
}

J'y ajoute les headers:

Code:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	<meta name="description" content="'._DESC_SITE.'"/> 
	<meta name="keywords" content="'._NOM_SITE.'" /> 
	<meta name="author" content="'._AUTHOR_SITE.'"/> 
	<title>'.$titre.'</title>
	<link rel="stylesheet" type="text/css" href="'._URL_ROOT.'/vues/css/style.css"/>
</head>

J'ai essayé l'attribut width dans la balise <td> mais il ne semble pas pris en compte; ensuite, j'ai tenté de définir la largeur d'une cellule par css et là non plus rien.

02/10/2010, 18h06
sebhm

bonjour,

l'attribut css "width" pour les <td> doit fonctionner.
04/10/2010, 11h31
tigunn

Bonjour,
:roll: Cela aurait été trop simple. Si je déclare width: 200px; dans td.tab_intitule_admin et td.tab_cellule_admin mais rien n'y fait. :cry:
04/10/2010, 12h08
sebhm

et pourtant...

commence par supprimer les attributs html width qui prennent certainement le pas sur le CSS.
Ensuite, poste un code HTML complet (pas de PHP parce qu'on ne peut pas tester comme ca) avec le css que tu as modifié (le CSS complet au cas où autre chose parasiterait ton affichage)

et on pourra t'aider à debugger
04/10/2010, 12h32
julienlacorne
Bonjour, il faut que tu définisse la taille du table et ensuite du tr, les td ne prenne que la taille de leur contenu... par exemple:
Code:

1 2 3 table { width: 100%; } tr { width: 50% }

Alors je reprends:
mon html généré:

Code:

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
<div id="liste_annonces_admin"><form name="Form_liste_annonces" method="POST" action="...page...">
	<input type="hidden" name="...." value="..."/>
<table border="1">
	<tr>
		<td class="tab_intitule_admin" title="ID">
		ID
		</td>
		<td class="tab_intitule_admin" title="Date">
		Date
		</td>
		<td class="tab_intitule_admin" title="Titre">
		Titre
		</td>
		<td class="tab_intitule_admin" title="Description">
		Texte
		</td>
</tr>
<tr class="tab_ligne_ok">
		<td class="tab_cellule_admin" title="ID">
		260
		</td>
		<td class="tab_cellule_admin" title="Date">
		2010-09-24 14:36:12
		</td>
		<td class="tab_cellule_admin" title="Titre">
		gdhgdfh
		</td>
		<td class="tab_cellule_admin" title="Description">
		(pour exemple:) abcdefg hijklmnop qrstuvwxYabcd efghijklmnopqr stuvwxYabcdef ghijklmnopqrs tuvwxYabcdefg hijklmnopqrst uvwxYabcdef ghijklmnopqrs tuvwxYabcdefg hijklmnopqrst uvwxYabcde fghijklmnopqrs tuvwxYabcdefghij klmnopqr stuvwxYabcdef ghijklmnopqrstuvwx Yabcdefghi jklmnopqrstuvw xYabcdef ghijklmnopq rstuvwxYabc defg hijk lmnopqrst uvwxfgfgY&nbsp;
		</td></tr><tr>
			<td colspan="4" align="right">
				<input type="submit" value="Save"/>
			</td>
		</tr></table>
</form>

et le css

Code:

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
51
52
53
54
55
56
57
 
div#liste_annonces_admin {
	position: relative;
	width: auto;
	left: 250px;
 
	margin: 0 2px 0 2px;
	padding: 0;
 
	background-color:transparent;
	z-index: 1;
 
	/* pour presentation du modele - a enlever */
	border-style: none;
	border-color: #F2D638;
	border-width: thin;
	}
 
tr.tab_ligne_ok {
	background-color: none;
}
 
tr.tab_ligne_pb {
	background-color: red;
}
 
tr.tab_ligne_non_accepte {
	background-color: pink;
}
 
tr.tab_ligne_non_confirme {
	background-color: yellow;
}
 
td.tab_intitule_admin {
	margin: 0;
	padding: 0 10px 0 10px;
	padding-left: 10px;
 
	color: #000000;
	font-size: 11px;
	font-style: normal;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-weight: bold;
}
 
td.tab_cellule_admin {
	margin: 0;
	padding: 0 10px 0 10px;
	padding-left: 10px;
 
	color: #000000;
	font-size: 11px;
	font-style: normal;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-weight: normal;
}

@julielacorne: je te remercie pour ton aide mais je n'ai pas compris ton message?!

Citation:

table { width: 100%; }
tr { width: 50% }

tu voulais dire

Code:

1
2
table { width: 100%; }
td { width: 50% }

04/10/2010, 13h45
tigunn

Merci Sebhm, j'ai trouvé 8-) !
le problème venait de la largeur de ma div liste_annonces_admin (css) définit en auto, ce qui était une erreur car cela empêche de définir la largeur des <td>. :ccool: