Définir la taille des <td>

**tigunn** · 02/10/2010, 15h29

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 :

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 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 :

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

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 :

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
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 :

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

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.

**sebhm** · 02/10/2010, 18h06

bonjour,

l'attribut css "width" pour les <td> doit fonctionner.

**tigunn** · 04/10/2010, 11h31

Bonjour,

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.

**sebhm** · 04/10/2010, 12h08

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

**julienlacorne** · 04/10/2010, 12h32

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 :

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

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

**tigunn** · 04/10/2010, 13h29

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

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
<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 :

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
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?!

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

tu voulais dire

Code :

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

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

**tigunn** · 04/10/2010, 13h45

Merci Sebhm, j'ai trouvé

!
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>.

Définir la taille des <td>

HTML

Discussions similaires

Partager

Partager