28172 sujets

CSS et mise en forme, CSS3

Forcer un scroll horizontal

Bonjour à tous,

J'ai une page qui reprend la meme trame qu'ici : http://css.alsacreations.com/modeles/modele4.htm

A l'intérieur de cette page, un joli tableau me prend toute la largeur de la page. Si le contenu des cellules est trop important, les cellules s'agrandissent en hauteur... C'est tout à fait l'inverse dont j'ai besoin : j'aimerais bloquer la hauteur des cellules, quitte à ce que l'on doivent scroller horizontalement pour voir les cellules qui se sont allongées en largeur...

J'ai essayé avec un traditionnel height:50px; mais aussi de jouer avec les overflow... rien n'y fait. En plus l'attribut "max-height" ne s'applique pas aux tables.

Alors si quelqu'un a une petite idée, ce serait avec plaisir.

Merci à tous et bonne journée.
Bonjour,

Ça n'est pas possible à ma connaissance.

En général, mieux vaut ne pas figer les hauteurs dans un site.
Désolé d'avoir mis tant de temps à répondre, les journées sont chargées...

En fait ce n'est pas la hauteur du site que je veux bloquer, mais seulement les cellules du tableau...

Si j'applique une largeur de 1500 pixels au tableau, pour tester, il s'étire bien et je peux donc scroller horizontalement. Mais étant donné que les données peuvent être très importantes, je ne peux pas avoir de largeur fixe...

En fait, le problème est qu'il faudrait générer une largeur du tableau en fonction du nombre d'éléments du tableau, et ça, je vois pas comment...

Merci de vos réponses toutefois, je reste sur le coup.

Bruntho.
À tout hasard, un essai intéressant avec white-space: nowrap et display: inline-block:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr:en" lang="fr:en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css" media="screen">
	div#test1,
	div#test2 {
		margin: 50px;
		white-space: nowrap;
	}
	div#test1 span {
		display: inline;
		margin: 10px;
		padding: 10px 100px;
		font-size: 2em;
		border: 3px solid green;
	}
	div#test2 div {
		display: inline-block;
		vertical-align: middle;
		white-space: normal;
		width: 30%;
		margin: 10px;
		padding: 20px;
		border: 3px solid blue;
	}
	div.second span {}
	</style>
</head>

<body>

<div id="test1">
	<span>lorem</span>
	<span>ipsum</span>
	<span>dolor</span>
	<span>sit amet</span>
	<span>a</span>
	<span>b</span>
	<span>c</span>
	<span>d</span>
	<span>e</span>
	<span>f</span>
	<span>g h i j k l m n o</span>
	<span>pqr</span>
</div>

<div id="test2">
	<div>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
		<p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor.</p>
	</div>
	<div>
		<p>Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
	</div>
	<div>
		<p>Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue.</p>
		<p>Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
		<p>Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.</p>
	</div>
	<div>a</div>
	<div>c</div>
	<div>d</div>
	<div>e</div>
	<div>f</div>
</div>

</body>
</html>

Pas compatible IE et Firefox 2. Marche très bien dans Safari 3, Opera 9 et Firefox 3.
Bonsoir,

Merci Florent V de ton implication dans ce post... Mais, je ne peux pas me permettre de faire des div, puisque c'est un tableau que je veux afficher... Dans ton exemple, les cases sont des div et d'une colonne sur l'autre, nous avons donc des largeurs différentes, qui rendront le tableau peu lisible...

Que faire mes amis, que faire ? Je planche toujours dessus. Je vos tiens au courant.

Bruntho.
Ben en fait comme je n'ai aucune idée de ton contenu réel et du rendu exact souhaité, je ne peux que proposer des petites choses un peu dans le vide, hein. Smiley cligne

À tout hasard, tu as tenté de faire un tableau avec des cellules de largeur fixe (en pourcentage ou pixels par exemple) et en table {table-layout: fixed;}?

http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout
Modifié par Florent V. (20 Feb 2008 - 10:09)
Oh que ce dernier post semble etre une super idée !!!

Je regarde ca de plus près...

Merci

:)

Bruntho.

Edit

J'ai essayé ca : 

tr, td {
height:50px;
table-layout: fixed;
width:auto;
}

table {
border-collapse:collapse;
border:1px #DDDDDD solid;
}


Mais ca ne change pas grand chose...

J'ai fait un essai en enlevant tout autre contenu, de manière à n'afficher que mon tableau sur la page, pour tester.

Pour ce qui est du contenu, il faut imaginer un tableau avec une dizaine de colonne et du contenu sous forme de texte, assez long par endroit...

Merci encore

Bruntho.
Modifié par Bruntho (20 Feb 2008 - 11:57)
Mais tu n'as aucune idée de la largeur de chaque colonne? Ça va pas aider...

Bon, ben ça me semble impossible cette histoire. Tu peux figer la largeur d'une cellule de tableau et lui demander de s'adapter à son contenu en hauteur, mais pas l'inverse. HTML et CSS sont fait pour une consultation verticale, et toute tentative de partir à l'horizontale passe nécessairement par des bidouillages, qui imposent de connaitre à l'avance la taille des contenus.
a écrit :
HTML et CSS sont fait pour une consultation verticale, et toute tentative de partir à l'horizontale passe nécessairement par des bidouillages


Tu résumes bien la situation... Merci d'avoir essayé tout de même et bonne continuation.

Bruntho.
moi je penserais a 2 solution :

php ou javascript
apres tu peut connaitre la longueur du texte dans la cellule et modifier la taille en dynamique
Sujet clos
Aller à