28173 sujets

CSS et mise en forme, CSS3

Le width d'un tableau refuse de passer

Bonjour,

j'essaye d'appliquer une largeur de 400px à un <TD>
via 
table#annonces td.bien-description {
	width: 400px;
	font-size: 2em;
}

alors que la font-size marche bien !

Une idée ? Smiley murf
Merci d'avance
Et donc ? C'est trop étroit, trop large, inexistant, anarchique ?

Tchupacabra a écrit :
Une idée ?

Une page en ligne ? Smiley cligne
désolé pas de page en ligne... Smiley langue
je suis en train de faire (commencer) une page d'administration des annonces.
Donc c'est un tableau affichant tous les annonces ligne par ligne avec plusieurs colonnes (identifiant, titre, description,etc ...) environ 12 colonnes.
La largeur des colonnes est au min... cad à chaque mot, y a un RC !

J'aimerais donc montre une taille fixe à certaines colonne dont description !
Tchupacabra a écrit :
La largeur des colonnes est au min... cad à chaque mot, y a un RC !

« la largeur des colonnes est au min » ?
« à chaque mot, y a un RC » ?

Désolé, mais sans page en ligne et avec ce genre de description, ça va être dur de t'aider...
Tchupacabra a écrit :
Je viens de remarquer que mon problème ne se pose que lorsque le tableau est plus large que la page.... Smiley ohwell

Oui, effectivement.

Je connais trop mal le rendu des tableaux pour être catégorique. Mais la seule solution que j'ai trouvée là tout de suite consiste à ajouter une div dans chaque cellule à dimensionner, et lui donner la largeur souhaitée.
<td><div>...</div></td>
Oryo a écrit :
ET pourquoi pas le faire en hauteur? Smiley lol

Ça c'est pas idiot. Smiley lol

Lanza a écrit :
Et avec un "table-layout: fixed;" ?

Bon alors j'ai un peu exploré la spécification et fait quelques tests, et pour que table-layout: fixed marche bien il me faut deux conditions :
- que les largeurs de cellules soient sur les cellules de la première ligne (sur celles des deuxièmes et troisièmes lignes ça marche pas) ;
- que le tableau ait une valeur de width différente de "auto".

Pour ce dernier point, ça peut être n'importe quoi : 100%, 10px, 0... tout sauf auto.

Voici ce que ça donne (j'ai un peu bousillé la mise en page au passage) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test avec tableau</title>

<style type="text/css">
table#annonces {
	table-layout: fixed;
	width: 10px;
}

/* TH */
table#annonces th {
	text-align: center;
	background-color: #D0DCE0;
	width: 100px;
}
table#annonces th.bien-description {
	width: 200px;
	background: red;
}

/* TR */
table#annonces tr.impair {
	background-color:#D7D7D7;
}
table#annonces tr.pair {
	background-color:#E9E9E9;
}
</style>
</head>

<body>
<table id="annonces" summary="">
	<thead>
        	<tr>
			<th>Titre</th>
			<th class="bien-description">Description</th>
			<th>Titre</th>
			<th class="bien-description">Description</th>
			<th>Titre</th>
			<th class="bien-description">Description</th>
			<th>Titre</th>
			<th class="bien-description">Description</th>
			<th>Titre</th>
			<th class="bien-description">Description</th>
			<th>Titre</th>
			<th class="bien-description">Description</th>
			<th>Titre</th>
			<th class="bien-description">Description</th>
			<th>Titre</th>
			<th class="bien-description">Description</th>
		</tr>
	</thead>
	<tbody>
		<tr class="impair">
			<td>Belle propriété en centre ville</td>
			<td>En plein centre ville, jardin, garage et véranda</td>
			<td>Belle propriété en centre ville</td>
			<td>En plein centre ville, jardin, garage et véranda</td>
			<td>Belle propriété en centre ville</td>
			<td>En plein centre ville, jardin, garage et véranda</td>
			<td>Belle propriété en centre ville</td>
			<td>En plein centre ville, jardin, garage et véranda</td>
			<td>Belle propriété en centre ville</td>
			<td>En plein centre ville, jardin, garage et véranda</td>
			<td>Belle propriété en centre ville</td>
			<td>En plein centre ville, jardin, garage et véranda</td>
			<td>Belle propriété en centre ville</td>
			<td>En plein centre ville, jardin, garage et véranda</td>
			<td>Belle propriété en centre ville</td>
			<td>En plein centre ville, jardin, garage et véranda</td>
		</tr>
		<tr class="pair">
			<td>Rénové</td>
			<td>Cet appartement duplex a entièrement été rénové</td>
			<td>Rénové</td>
			<td>Cet appartement duplex a entièrement été rénové</td>
			<td>Rénové</td>
			<td>Cet appartement duplex a entièrement été rénové</td>
			<td>Rénové</td>
			<td>Cet appartement duplex a entièrement été rénové</td>
			<td>Rénové</td>
			<td>Cet appartement duplex a entièrement été rénové</td>
			<td>Rénové</td>
			<td>Cet appartement duplex a entièrement été rénové</td>
			<td>Rénové</td>
			<td>Cet appartement duplex a entièrement été rénové</td>
			<td>Rénové</td>
			<td>Cet appartement duplex a entièrement été rénové</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Ah oui, j'ai rajouté un thead, ça manquait je crois.
merci beaucoup Florent V. et Lanza pour votre précieuse aide !
le seul hic que je trouve avec cette méthode est l'obligation de préciser le width de chaque colonne !
Etant donné que j'en une douzaine de taille différente...c'est pas terrible.
Si je supprime le width du table#annonces th le th restant (hormis "description") ont une très petite largeur avec leur texte sortant de la cellule...

En tout cas, c'est sympa de passer du temps sur mon problème. Smiley smile
Sujet clos
Aller à