Définir la taille des <td> [Résolu]

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

Citation:

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

02/10/2010, 18h06	#2
sebhm Modérateur Seb Développeur Web Inscription : avril 2004 Messages : 1 088 Détails du profil Informations personnelles : Nom : Seb Âge : 32 Localisation : France, Landes (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : Agroalimentaire - Agriculture Informations forums : Inscription : avril 2004 Messages : 1 088 Points : 1 298 Points : 1 298	bonjour, l'attribut css "width" pour les <td> doit fonctionner. __________________ Les règles les FAQ Web les Cours Web
	00

04/10/2010, 11h31	#3
tigunn Membre chevronné Développeur de bug Inscription : janvier 2003 Messages : 565 Détails du profil Informations personnelles : Sexe : Âge : 32 Localisation : France Informations professionnelles : Activité : Développeur de bug Informations forums : Inscription : janvier 2003 Messages : 565 Points : 607 Points : 607	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. __________________ "le rhume distillation - L’estomac est la cucurbite, le cerveau le chapiteau, & le nez le réfrigérant par lequel s’écoule goutte à goutte le produit de la distillation." de Avicenne Le monde se divise en deux: ceux qui utilisent le tag et les autres. Un problème? venez en découdre!
	00

04/10/2010, 12h08	#4
sebhm Modérateur Seb Développeur Web Inscription : avril 2004 Messages : 1 088 Détails du profil Informations personnelles : Nom : Seb Âge : 32 Localisation : France, Landes (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : Agroalimentaire - Agriculture Informations forums : Inscription : avril 2004 Messages : 1 088 Points : 1 298 Points : 1 298	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 __________________ Les règles les FAQ Web les Cours Web
	00

04/10/2010, 13h45	#7
tigunn Membre chevronné Développeur de bug Inscription : janvier 2003 Messages : 565 Détails du profil Informations personnelles : Sexe : Âge : 32 Localisation : France Informations professionnelles : Activité : Développeur de bug Informations forums : Inscription : janvier 2003 Messages : 565 Points : 607 Points : 607	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>. __________________ "le rhume distillation - L’estomac est la cucurbite, le cerveau le chapiteau, & le nez le réfrigérant par lequel s’écoule goutte à goutte le produit de la distillation." de Avicenne Le monde se divise en deux: ceux qui utilisent le tag et les autres. Un problème? venez en découdre!
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email