Forum Clubic

Définir une fois pour toutes la largeur d'un tableau en HTML

Bonjour

Je suis en train de créer un tableau 212 - 2 lignes, 12 colonnes - en html (je sais, c’est sale, mais bon, j’men fiche :smiley: ). Et dans ce tableau, pour chaque case de la deuxième ligne, il y a un autre tableau de 14.

En gros cela donne :
1ère ligne : 12 cases
2ème ligne : 48 cases

Le soucis est que j’ai défini la largeur mon grand tableau, et lorsque je remplis les 48 cases de la deuxième ligne, mon tableau s’élargiiiiiiiiiiiiiiiiiiiiiiiiiiit, à tel point qu’il me faut deux écrans pour tout voir.

voici un petit screen pour que vous vous en rendiez bien compte : [Photo supprimée]

J’aimerais donc connaitre le moyen qui me permettrait de diminuer la largeur, merci d’avance !

PS : j’oubliais, voici le code de mon tableau


echo '<link rel="stylesheet" type="text/css" href="./styles/stylesheet.css">';
// Grand tableau (2*12)			
echo '<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">';
				// affichage des mois (ligne 1)
				echo '<tr>
						<td style="text-align: center; width: 74px;">Janvier</td>
						<td style="text-align: center; width: 74px;">F&eacute;vrier</td>
						<td style="text-align: center; width: 74px;">Mars</td>
						<td style="text-align: center; width: 74px;">Avril</td>
						<td style="text-align: center; width: 74px;">Mai</td>
						<td style="text-align: center; width: 74px;">Juin</td>
						<td style="text-align: center;">Juillet</td>
						<td style="text-align: center; width: 74px;">Aout</td>
						<td style="text-align: center; width: 74px;">Septembre</td>
						<td style="text-align: center; width: 74px;">Octobre</td>
						<td style="text-align: center; width: 74px;">Novembre</td>
						<td style="text-align: center; width: 74px;">D&eacute;cembre</td>
					</tr>';
				// affichage des dates (ligne 2)
				echo '<tr>';					
					
					while ($date <= strtotime("12/31/2011"))
					{
						
					
						// Test pour connaitre le navigateur afin d'appliquer le bon style
						// si IE
						if (ereg("MSIE", getenv("HTTP_USER_AGENT")))
							$style = "date_IE";
                                                // si autre que IE
						else
							$style = "date_NON_IE";
						
						
						
						
						// affichage du tableau de 4 cases contenant les dates
						echo '	<td style="height:74px; width:74px;">
									<table >
										<tr>
											<td class='.$style.'  border="1">'.date('d/m/Y', $date).'</td>
											<td class='.$style.'  border="1">'.date('d/m/Y', $date+=7*86400).'</td>
											<td class='.$style.'  border="1">'.date('d/m/Y', $date+=7*86400).'</td>
											<td class='.$style.'  border="1">'.date('d/m/Y', $date+=7*86400).'</td>
										</tr>
									</table>
								</td>';
						
						$date+=7*86400;
						
						// mise à jour des variables jour et mois
						$jour = date('j', $date);
						$mois = date('n', $date);
					}		
				echo "</tr>";
				
				
			echo "</table>";

Aussi, dans la feuille de style, il n’y a rien concernant le tableau, c’est juste pour mettre le texte à la verticale
Edité le 04/07/2011 à 16:45

Si tu remplis ton tableau d’une chaîne de 48 caractères sans espaces, il va exploser, mais sinon définir sa largeur en CSS suffit.

Ton screen est mort :confused:

Je ne vois pas ce que tu veux dire

 width: 100%

et c’est quoi à ton avis ?? Même en mettant la taille en px, ca me fait la même chose.

Clic sur l’image :slight_smile:

Normal.
Tu défini une valeur pour tes cases en px et pour le tableau en %…
Pourquoi le mois de Juillet n’as aucune valeur???

Juin Juillet Aout Ta le problème sous IE6 seulement ou les autres versions aussi? Si ma [mémoire ](http://www.institut-numerique.org/universite/memoire-en-ligne)est bonne ce n'est pas compatible avec la norme WRC! Edité le 28/06/2011 à 11:13

sans espaces, donc une chaîne de 48 ‘a’ explosera ton tableau, il fera jamais de retour à la ligne

A mon avis, c’est sale, on ne met pas de CSS directement dans le HTML, on génère encore moins la ligne en PHP, tu balances
une feuille de style juste au dessus, pourquoi t’y reviens là ? pourquoi des %.
Ha oui :

Forcément 100% de pas de taille c’est pas de taille.

Ça doit venir du proxy à la con qu’il y a ici alors.

A mon avis, refait une feuilles de style propre, qui se charge de définir l’apparence de toute ta page, et évite de faire du traitement là où du HTML brut suffit.
Edité le 23/06/2011 à 13:06

je mélange les deux PHP et html pour faciliter le traitement (je dois afficher la date de début de chaque semaine de chaque mois et ce, pour n’importe quelle année. Vous m’expliquez comment je fais ça en HTML brut ?

[quote=“Monsieur_Odd”]

sans espaces, donc une chaîne de 48 ‘a’ explosera ton tableau, il fera jamais de retour à la ligne
[/quote"]

Chacune des 48 cases contient une date sous format JJ/MM/AAAA

[quote=“Monsieur_Odd”]

A mon avis, c’est sale, on ne met pas de CSS directement dans le HTML, on génère encore moins la ligne en PHP, tu balances
une feuille de style juste au dessus, pourquoi t’y reviens là ? pourquoi des %.
[/quote"]

Lorsque je conçois une page, le style est directement défini dans la balise. Une fois la page terminée, je fais une CSS externe
Les %, c’est la taille relative à ton écran. De cette manière, quelque soit l’écran, le tableau tiendrait en entier sur un seul écran.

J’me retire parce que tu me vois aussi largué que toi.


echo '<link rel="stylesheet" type="text/css" href="./styles/stylesheet.css">';
// Grand tableau (2*12)			
echo '<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">';
				// affichage des mois (ligne 1)
				echo '<tr>
						<td style="text-align: center; width: 74px;">Janvier</td>
						<td style="text-align: center; width: 74px;">F&eacute;vrier</td>
						<td style="text-align: center; width: 74px;">Mars</td>
						<td style="text-align: center; width: 74px;">Avril</td>
						<td style="text-align: center; width: 74px;">Mai</td>
						<td style="text-align: center; width: 74px;">Juin</td>
						<td style="text-align: center;">Juillet</td>
						<td style="text-align: center; width: 74px;">Aout</td>
						<td style="text-align: center; width: 74px;">Septembre</td>
						<td style="text-align: center; width: 74px;">Octobre</td>
						<td style="text-align: center; width: 74px;">Novembre</td>
						<td style="text-align: center; width: 74px;">D&eacute;cembre</td>
					</tr>';
				// affichage des dates (ligne 2)
				echo '<tr>';	

Juste que là, il n’y a pas de traitement, pas besoin de script, pas d’echo.

Je vois pas sinon, le foutre dans un div et définir la taille de celui ci ?

Car la taille du tableau est de 987 px. En enlevant la taille des bordures, on trouve 11 cases de 74px et une de 73. Donc inutile de préciser la taille

IE ??? VADE RETRO SATANAS !! Nan, je tourne sous chrome pour l’instant (je vais faire des tests sous Firefox plus tard)

48 cases de 74px pour les dates alors ?

3552px, ça fait balèze comme définition pour faire tenir ça en largeur, ne serait-ce pas aussi simple que ça ?

Je te rassure, toutes les cases ne font 74px
Seules celles du grand tableau font 74px, les petites ne font que 18px (~1/4 de 74)

J’a ré-up l’image :
[Photo supprimée]
image.clubic.com…

Je comprend pas comment il se fait qu’un tableau qui doit faire 987 pixels en fasse le triple :confused:

Si tu fixes sa taille à 987, ça donne la même ?

Je suis juste sur que tes 12 colonnes mois font bien plus que 74px.

En cadeau, un joli carré rouge de 74x74[Photo supprimée]

Ce qui devrait être la taille des cellules de ta seconde lignes.
Edité le 23/06/2011 à 14:39

Moi non plus, et c’est pour ça que j’ai créé le sujet

Mais je soupçonne ton 100% quand même, comment un tableau de 987px pourrait prendre toute la place à l’écran, c’est incohérent…

Ca fait la même avec une taille fixe ? Dans un DIV qui aurait une taille fixe ? si tu fixe la taille de ton tableau dans ton tableau ?

J’ai cherché un peu, beaucoup de même problèmes, peu de solution, à part “fixe la taille du tableau et pas seulement des cellules”
Edité le 23/06/2011 à 16:34

C’est bon, j’ai réussi :sol:

Pour ce qui est du tableau dans la une cellule du tableau


<table border="1" style="width:74px;" >
										<tr>										
											<td> <div class='.$style.'>'.date('d/m/Y', $date).'</div></td>
											<td> <div class='.$style.'>'.date('d/m/Y', $date+=7*86400).'</div></td>
											<td> <div class='.$style.'>'.date('d/m/Y', $date+=7*86400).'</div></td>
											<td> <div class='.$style.'>'.date('d/m/Y', $date+=7*86400).'</div></td>
										</tr>
									</table>

CSS


.date_NON_IE
{
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);
	width:18px;
	/*height:25px;*/
	font-size: 10px;
	margin-top:30px;
	margin-bottom:5px;
	vertical-align:center;
}

Vraiment à ch*er la balise code !!
Edité le 24/06/2011 à 08:44

va jeter un coup d’œil la dessus : cuisine italienne.
Le site marche sous ie 8, ff , chrome.
Mais pour ce qui est des autres navigateurs, j’ai envie de pleurer…
C’est pour cela que je te pose la question, j’ai le mémé souci avec un tableau, mais impossible de le régler sous ie6.