28172 sujets

CSS et mise en forme, CSS3

Table width 100%

Hi,

j'ai un petit problème avec une page. Quelqu'un peut me dire pourquoi le tableau ne respecte pas la div#page ?

Quand j'ai autre chose qu'un tablea tout va bien, par contre lorsqu'un tableau est placé dans la div#page celle si prend la taille du body (il me semble). (Sur firefox en tout cas)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
#c {
	width:100%;
	float:left;
	background-color:blue;
	min-width:960px;
}
#left {
	float:left;
	width:150px;
	height:500px;
	background-color:red;
}
#right {
	float:right;
	width:150px;
	height:500px;
	background-color:yellow;
}
#page {
	background-color:purple;
	width:100%;
}
#page table {
width:100%;
}
</style>
</head>
<body>
<div id="c">
	<div id="left">
		ds
	</div>

	<div id="right">
		ds
	</div>
	<div id="page">
		<table>
		<thead >
			<tr >
				<th width="10%">Date</th>
				<th width="60%">Title - Location</th>
				<th width="20%">Company</th>
				<th width="10%">Score</th>
			</tr>
		</thead>
		<tbody>
			<tr >
				<td >dsqdsq</td>
				<td >dsqdsq</td>
				<td >dsqdsq</td>
				<td >dsqdsq</td>
			</tr>
			<tr >
				<td >dsqdsq</td>
				<td >dsqdsqdsqdsqdsqdsq dssqdsqdsqdsq dsqdsqd sqdsqdsqdsqdsqdsqdsq dsqdsqdsqdsqdsqds qdsqdsqdsqdsq dsq</td>
				<td >dsqdsq</td>
				<td >dsqdsq</td>
			</tr>
		</tbody>
		</table>
	</div>
</div>
</body>
</html>


Si quelqu'un peut me file un coup de main merci d'avance Smiley cligne
Modifié par einboubou (05 Dec 2009 - 20:20)
Salut,

je ne suis pas experte en CSS (donc prend ma suggestion avec des pincettes... Smiley confused ), mais je crois que le problème vient du "width=100%" appliqué au bloc #page, qui signifie que #page va prendre la largeur de son bloc parent, à savoir ton conteneur global #c (qui contient aussi les deux colonnes latérales), de même donc par suite que ton tableau.

Essaie donc de l'enlever, et d'ajouter des marges (ou des padding: l'effet est un peu différent avec les background-color) à gauche et à droite du bloc #page de la taille des colonnes latérales (soit 150px). Ce qui donne:


#page { 
	background-color:purple; 
	margin-left:150px;
	margin-right:150px;
}


Par ailleurs, je ne suis pas sûr que le float sur le conteneur global #c soit très utile... Non?

En espérant que ça puisse t'aider.
Ah ça a bien arrangé les choses Smiley smile

Je ne sais pas pourquoi je n'y ai pas pensé...

Il fallait aussi mettre #page width:auto.

Maintenant il n'y a que ie6 qui n'est pas bon, quelqu'un peut me dire d'où ça vient ?

Merci Polly-Jean !
La balise <head> doit contenir une balise <title></title> (le titre de la page web)... Pense à regarder ce que te dit le validateur concernant les erreurs qu'il a repérées:

a écrit :
"Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists (ul, ol, dl) require list items (li, or dt, dd), and so on."


On a parfois la réponse sous les yeux! Smiley cligne

Pour le problème avec IE6, ça vient apparemment du "width:100%" appliqué au tableau. Une largeur de 99% (en ajustant la largeur des <th>) règle le problème. Mais c'est plus un truc qu'une véritable explication/solution... Smiley ohwell
Modifié par Polly-Jean (06 Dec 2009 - 01:05)
bouah super Smiley smile

J'avais lus que la première phrase du validator Smiley ohwell désolé

Pour le tableau ça marche j'avoue ne pas comprendre mais bon merci encore Smiley smile
Sujet clos
Aller à