Nowrap pour un tableau se trouvant dans un div avec scroll

Bonjour,

j'ai un tableau de x colonnes avec du nowrap qui se trouve dans un div scrollable de taille y. J'aimerai forcer la largeur d'une colonne même si le tableau devra être scrollé. Mais le browser se tappe bien pas mal du width attribué, chaque cellule ne peut être plus grande que la taille de son contenu. Pourtant si mon tableau est plus petit que la largeur de son conteneur, le browser veut bien augmenter la taille de ma cellule mais que jusqu'à ce que le tableau atteigne la largeur du conteneur, jamais plus.

css

#tableAll {
		height: 200px;
		width: 1500px;
		overflow: scroll;
	}
	
	td {
		border: 1px solid;
		white-space: nowrap;
	}

	.col1{
		width: 600px;
	}

html

<div id="tableAll">
		<table>
			<tr>
				<td class="col1"><span>Ceci est un texte</span></td>
				<td><span>Ceci est un texte</span></td>
				<td><span>Ceci est un texte</span></td>
				<td><span>Ceci est un texte</span></td>
				<td><span>Ceci est un texte</span></td>
				<td><span>Ceci est un texte</span></td>
				<td><span>Ceci est un texte</span></td>
				<td><span>Ceci est un texte</span></td>
				<td><span>Ceci est un texte</span></td>
				<td><span>Ceci est un texte</span></td>
				<td class="col1"><span>Ceci est un texte</span></td>
			</tr>		
		</table>
	</div>

merci pour votre aide
Modifié par MrHankey (07 Nov 2008 - 16:00)

bonjour

Pour que ton tableau ne se trouve pas compressé , fait lui 'croire' qu'il dispose de plus d'espace.

Ceci est possible dans ta configuration a priori :
Un conteneur en overflow + dimension == engloberas son flottant dans IE et ailleurs.

On peut donc positionner ton tableau en flottant pour qu'il se calle a gauche et rendre la technique utilisable dans nombre de navigateurs. .

Jusque la , rien de changer il se compresse autant qu'il peut dans son div parent .

Pour lui donner un peu d'espace il suffit d'appliquer une marge négative a droite .
Plus cette marge négative sera grande , plus il pourra s'etendre .
Attention a ne pas trop la forcer , -9999px semble la limite encore acceptable chez Opera (pour ne pas evincer des techniques d'IR , j'imagine).

en résumé:

#tableAll table{
float:left;
margin-right:-9999px;/* valeur maximale autorisée */
}

..... Arf , ma souris , a scroll pas en droite gauche droite ...

GC