Cellules taille fixe, empecher redimentionnement tableau

Bonjour,
J'ai un petit souci en css.
Je suis entrain de créer une classe php qui me permet de faire des Gantt( juste histoire de me faire la main).

Aussi pour le fond du graphique, je me base sur un tableau dont chaque cellule est fixé à 15px en hauteur et en largeur.

J'ai placé dans mon tableau dans un div avec un

overflow:hidden 

( et du javascript me permet de naviguer sur ce tableau).

Tout fonctionne à merveille, sauf dans le cas ou le tableau en question est plus grand que la largeur de la page.
En effet IE ou FireFox redimensionne automatiquement la largeur des colonnes pour que tout "rentre".

Il ya t'il un moyen de fixe cela, car même

 table-layout:fixed

; ne corrige pas ce problème.

Merci par avance pour votre aide !
Modifié par proxynet (08 May 2012 - 21:41)

Le code correspondant aiderait à saisir le problème
Modifié par Hermann (08 May 2012 - 21:42)

Je propose une idée :
L'attribut overflow,
Pourrais-tu l'attribuer
À la balise tableau ?

<div class='gantt contenu'>
	<table cellspacing='0' cellpadding='0'>
	<thead style='font-size:12px;'>
	<tr>
		<th style='height:15px;width:60px;'>
		</th>
		<th colspan='10' style='height:15px;'>
			 2009
		</th> etc.....

		

	</tr>
	<tr>
		<th style='height:15px;width:60px;'>
		</th>
		<th> 1</th> etc.... <th> 31</th>


	</tr>
	</thead>
	<tbody style='font-size:12px;'>
	<tr style='height:15px;border:1px solid black;'>
		<td style='width:60px;'>
			 AVP
		</td>
		<td style='height:15px;border:1px solid black;width:15px;'>
			 &nbsp;
		</td> etc.....
		
		
	</tr>
	</tbody>
	</table>
	

</div>

*{
    margin:0;
    overflow:hidden;
    padding:0;
}
.gantt{
    top:0;
    left:0;
    position:absolute;
 
}

.gantt table {
    
	position:relative;
        top: 0px;
        margin:0px;
        padding:0px;
	border-spacing: 0px;
	border-style: solid;
	border-color: black;
	border-collapse: collapse;
	background-color: rgb(250, 240, 230);
        table-layout:fixed;
width:100%;
overflow:hidden;
white-space: nowrap;
word-wrap:break-word;
     
}
.gantt table thead tr{
         position:relative;
         top: 0px;
           top: 0px;
        margin:0px;
        padding:0px;
          border-style:solid;
            border-color: black;
            border-width:1px;
             text-align:center;
}          
.gantt table thead td,.gantt table thead th {
	
	padding: 0px;
          top: 0px;
        margin:0px;
        padding:0px;
	 overflow:hidden;
	background-color: rgb(250, 240, 230);
                  border-style:solid;
            border-color: black;
            border-width:1px;
	
}
.gantt table tbody td{
   white-space:nowrap; 
   min-width: 15px;
}

.gantt{
    position: relative;
    width:100%;
    margin:0;
    padding:0;
 }

Modifié par proxynet (08 May 2012 - 22:03)

Désolé pour le code un peu "long"...
Je vais tester l'overflow sur le tableau, mais il me semble que ça ne fonctionne pas sur cet élément.

Edit: Je n'avais pas fait attention, mais oui, j'ai déjà essayé un overflow: hidden, comme sur le code ci-dessus et sans résultat.
Modifié par proxynet (08 May 2012 - 21:58)

Pourquoi du css dans le html,
Si tu as déjà fait un css externe ?
Que ton message est long !
Ça n'en vaut pas la peine,
Mais qu'un peu d'édition
Fasse qu'il en devienne.
Modifié par Muchos (08 May 2012 - 22:04)

Oui, j'ai édité...

Il ya de du css dans l'html, car la taille des cellules est créé dynamiquement en php par ma classe, en fonction des élements qu'il contient.



Disons voir que tout ce qui est taille est généré par le php (suivant la 'vue' à afficher) et tout
les autres attributs 'fixe' sont dans un css.

Ici dans mon code subsiste des éléments de 'taille' au niveau du fichier css, mais ce n'était que pour test.
Modifié par proxynet (08 May 2012 - 22:08)

Tu as une mauvaise compréhension de la propriété overflow.
Il faut donner une largeur fixe au table ou aux th du premier tr.

Oups !
Merci , c'est c'est nickel !