Accueil > SPIP > HTML et CSS > Zone avec scrollbar dans une page html pour afficher un élément (tableau, (...)

Zone avec scrollbar dans une page html pour afficher un élément (tableau, image,...) trop large

mardi 22 mai 2018, par François Daniel Giezendanner

Notez cet article

Sommaire

Un élément (tableau, image,...) est trop large pour être affiché complètement

Lorsque l’élément (tableau, image,...) est trop large pour s’afficher complètement dans un article, il est tronqué à droite. Pour l’afficher complètement il faut faire intervenir une barre de défilement horizontale (scrollbar) placée à la base de l’élément avec la propriété CSS overflow.

Lorsqu’il s’agit d’un tableau qui est trop large (trop de colonnes) pour s’afficher complètement dans un article, seules s’affichent les premières colonnes, le tableau est tronqué à droite.

C’est le cas du grand tableau de l’article : Origine latine de septante, octante et nonante et influence sur la numération de 9 langues romanes.

Solution

A cette fin nous disposons de l’élément HTML div et de la propriété CSS overflow qui gère la manière dont sont affichées les barres de défilement de la div.

Les valeurs possibles pour la propriété overflow sont :

overflow : visible;

overflow : hidden;

overflow : scroll;

overflow : auto;

overflow : inherit;

Avec comme fonctionnalités :

visible : rend visible tout ce qui dépasse de l’élément et ne met pas de barre de défilement. Valeur par défaut.
hidden : cache tout ce qui dépasse de l’élément et ne met pas de barre de défilement (scrollbar).
scroll : met toujours une barre de défilement horizontale et verticale.
auto : met une barre de défilement horizontale ou verticale si besoin.
inherit : hérite de la propriété CSS overflow de son parent (CSS2).

Notre choix

Nous choisissons le valeur scroll et appliquons le code suivant :

<div style="overflow:scroll; border:#000000 1px solid;">



... ici l'élément (tableau, image,...) ...



</div>

Exemple 1 : Un tableau trop large avec `overflow:scroll;`

Avec :

<div style="overflow:scroll; border:#000000 1px solid;">



... ici le tableau ...



</div>

Ce qui donne sur l’extrait de tableau allant de 78 à 92 :

Nombre	Nombre romain	Latin	Francophone Suisse (Fribourg, Vaud, Valais)	Francophone Suisse (archaïque)	Francophone Belgique et Suisse (Berne, Genève, Jura)	Français	Occitan	Romanche	Italien	Espagnol	Catalan	Portugais	Roumain	Allemand	Anglais	Espéranto	Nombre
78	LXXVIII	duodeoctoginta	septante-huit	septante-huit	septante-huit	soixante-dix-huit	setanta uèch	settantotg	settantotto	setenta y ocho	setanta-vuit	setenta e oito	?aptezeci ?i opt	achtundsiebzig	seventy-eight	sepdek ok	78
79	LXXIX	undeoctoginta	septante-neuf	septante-neuf	septante-neuf	soixante-dix-neuf	setanta nòu	settantanov	settantanove	setenta y nueve	setanta-nou	setenta e nove	?aptezeci ?i noua	neunundsiebzig	seventy-nine	sepdek nau	79
80	LXXX	octoginta	huitante	octante	quatre-vingts	quatre-vingts	ochanta	otganta	ottanta	ochenta	vuitanta	oitenta	optzeci	achtzig	eighty	okdek	80
81	LXXXI	octoginta unus	huitante et un	octante-et-un	quatre-vingt-un	quatre-vingt-un	ochanta un	otgantin	ottantuno	ochenta y uno	vuitanta-u((un, una)	oitenta e um	optzeci ?i unu / una	einundachtzig	eighty-one	okdek unu	81
82	LXXXII	octoginta duo	huitante-deux	octante-deux	quatre-vingt-deux	quatre-vingt-deux	ochanta dos	otgantadus	ottantadue	ochenta y dos	vuitanta-dos(dues)	oitenta e dois	optzeci ?i doi	zweiundachtzig	eighty-two	okdek du	82
83	LXXXIII	octoginta tres	huitante-trois	octante-trois	quatre-vingt-trois	quatre-vingt-trois	ochanta tres	otgantatrais	ottantatré	ochenta y tres	vuitanta-tres	oitenta e três	optzeci ?i trei	dreiundachtzig	eighty-three	okdek tri	83
84	LXXXIV	octoginta quattuor	huitante-quatre	octante-quatre	quatre-vingt-quatre	quatre-vingt-quatre	ochanta quatre	otgantaquatter	ottantaquattro	ochenta y cuatro	vuitanta-quatre	oitenta e quatro	optzeci ?i patru	vierundachtzig	eighty-four	okdek kvar	84
85	LXXXV	octoginta quinque	huitante-cinq	octante-cinq	quatre-vingt-cinq	quatre-vingt-cinq	ochanta cinc	otgantatschintg	ottantacinque	ochenta y cinco	vuitanta-cinc	oitenta e cinco	optzeci ?i cinci	fünfundachtzig	eighty-five	okdek kvin	85
86	LXXXVI	octoginta sex	huitante-six	octante-six	quatre-vingt-six	quatre-vingt-six	ochanta sièis	otgantasis	ottantasei	ochenta y seis	vuitanta-sis	oitenta e seis	optzeci ?i ?ase	sechsundachtzig	eighty-six	okdek ses	86
87	LXXXVII	octoginta septem	huitante-sept	octante-sept	quatre-vingt-sept	quatre-vingt-sept	ochanta sèt	otgantaset	ottantasette	ochenta y siete	vuitanta-set	oitenta e sete	optzeci ?i ?apte	siebenundachtzig	eighty-seven	okdek sep	87
88	LXXXVIII	duodenonaginta	huitante-huit	octante-huit	quatre-vingt-huit	quatre-vingt-huit	ochanta uèch	otgantotg	ottantotto	ochenta y ocho	vuitanta-vuit	oitenta e oito	optzeci ?i opt	achtundachtzig	eighty-eight	okdek ok	88
89	LXXXIX	undenonaginta	huitante-neuf	octante-neuf	quatre-vingt-neuf	quatre-vingt-neuf	ochanta nòu	otgantanov	ottantanove	ochenta y nueve	vuitanta-nou	oitenta e nove	optzeci ?i noua	neunundachtzig	eighty-nine	okdek nau	89
90	XC	nonaginta	nonante	nonante	nonante	quatre-vingt-dix	nonanta	novanta	novanta	noventa	noranta	noventa	nouazeci	neunzig	ninety	naudek	90
91	XCI	nonaginta unus	nonante et un	nonante et un	nonante et un	quatre-vingt-onze	nonanta un	novantin	novantuno	noventa y uno	noranta-u((un, una)	noventa e um	nouazeci ?i unu / una	einundneunzig	ninety-one	naudek unu	91
92	XCII	nonaginta duo	nonante-deux	nonante-deux	nonante-deux	quatre-vingt-douze	nonanta dos	novantadus	novantadue	noventa y dos	noranta-dos(dues)	noventa e dois	nouazeci ?i doi	zweiundneunzig	ninety-two	naudek du	92
Nombre	Nombre romain	Latin	Francophone Suisse (Fribourg, Vaud, Valais)	Francophone Suisse (archaïque)	Francophone Belgique et Suisse (Berne, Genève, Jura)	Français	Occitan	Romanche	Italien	Espagnol	Catalan	Portugais	Roumain	Allemand	Anglais	Espéranto	Nombre

Sur les ordinateurs de bureau le visionnement du tableau est assuré par une barre de défilement horizontale (scrollbar) qui est affichée en bas du tableau, par contre sur les tablettes et smartphones la scrollbar n’est pas visible et on fait défiler le tableau de gauche à droite et de droite à gauche en faisant glisser le doigt sur l’écran.

Exemple 2 : Un tableau dans une div limitée en width et height avec `overflow:scroll;`

Avec :

<div style="overflow:scroll; border:#000000 1px solid; width: 500px; height: 500px;">

... ici le tableau ...

</div>

Ce qui donne :

Nombre	Nombre romain	Latin	Francophone Suisse (Fribourg, Vaud, Valais)	Francophone Suisse (archaïque)	Francophone Belgique et Suisse (Berne, Genève, Jura)	Français	Occitan	Romanche	Italien	Espagnol	Catalan	Portugais	Roumain	Allemand	Anglais	Espéranto	Nombre
78	LXXVIII	duodeoctoginta	septante-huit	septante-huit	septante-huit	soixante-dix-huit	setanta uèch	settantotg	settantotto	setenta y ocho	setanta-vuit	setenta e oito	?aptezeci ?i opt	achtundsiebzig	seventy-eight	sepdek ok	78
79	LXXIX	undeoctoginta	septante-neuf	septante-neuf	septante-neuf	soixante-dix-neuf	setanta nòu	settantanov	settantanove	setenta y nueve	setanta-nou	setenta e nove	?aptezeci ?i noua	neunundsiebzig	seventy-nine	sepdek nau	79
80	LXXX	octoginta	huitante	octante	quatre-vingts	quatre-vingts	ochanta	otganta	ottanta	ochenta	vuitanta	oitenta	optzeci	achtzig	eighty	okdek	80
81	LXXXI	octoginta unus	huitante et un	octante-et-un	quatre-vingt-un	quatre-vingt-un	ochanta un	otgantin	ottantuno	ochenta y uno	vuitanta-u((un, una)	oitenta e um	optzeci ?i unu / una	einundachtzig	eighty-one	okdek unu	81
82	LXXXII	octoginta duo	huitante-deux	octante-deux	quatre-vingt-deux	quatre-vingt-deux	ochanta dos	otgantadus	ottantadue	ochenta y dos	vuitanta-dos(dues)	oitenta e dois	optzeci ?i doi	zweiundachtzig	eighty-two	okdek du	82
83	LXXXIII	octoginta tres	huitante-trois	octante-trois	quatre-vingt-trois	quatre-vingt-trois	ochanta tres	otgantatrais	ottantatré	ochenta y tres	vuitanta-tres	oitenta e três	optzeci ?i trei	dreiundachtzig	eighty-three	okdek tri	83
84	LXXXIV	octoginta quattuor	huitante-quatre	octante-quatre	quatre-vingt-quatre	quatre-vingt-quatre	ochanta quatre	otgantaquatter	ottantaquattro	ochenta y cuatro	vuitanta-quatre	oitenta e quatro	optzeci ?i patru	vierundachtzig	eighty-four	okdek kvar	84
85	LXXXV	octoginta quinque	huitante-cinq	octante-cinq	quatre-vingt-cinq	quatre-vingt-cinq	ochanta cinc	otgantatschintg	ottantacinque	ochenta y cinco	vuitanta-cinc	oitenta e cinco	optzeci ?i cinci	fünfundachtzig	eighty-five	okdek kvin	85
86	LXXXVI	octoginta sex	huitante-six	octante-six	quatre-vingt-six	quatre-vingt-six	ochanta sièis	otgantasis	ottantasei	ochenta y seis	vuitanta-sis	oitenta e seis	optzeci ?i ?ase	sechsundachtzig	eighty-six	okdek ses	86
87	LXXXVII	octoginta septem	huitante-sept	octante-sept	quatre-vingt-sept	quatre-vingt-sept	ochanta sèt	otgantaset	ottantasette	ochenta y siete	vuitanta-set	oitenta e sete	optzeci ?i ?apte	siebenundachtzig	eighty-seven	okdek sep	87
88	LXXXVIII	duodenonaginta	huitante-huit	octante-huit	quatre-vingt-huit	quatre-vingt-huit	ochanta uèch	otgantotg	ottantotto	ochenta y ocho	vuitanta-vuit	oitenta e oito	optzeci ?i opt	achtundachtzig	eighty-eight	okdek ok	88
89	LXXXIX	undenonaginta	huitante-neuf	octante-neuf	quatre-vingt-neuf	quatre-vingt-neuf	ochanta nòu	otgantanov	ottantanove	ochenta y nueve	vuitanta-nou	oitenta e nove	optzeci ?i noua	neunundachtzig	eighty-nine	okdek nau	89
90	XC	nonaginta	nonante	nonante	nonante	quatre-vingt-dix	nonanta	novanta	novanta	noventa	noranta	noventa	nouazeci	neunzig	ninety	naudek	90
91	XCI	nonaginta unus	nonante et un	nonante et un	nonante et un	quatre-vingt-onze	nonanta un	novantin	novantuno	noventa y uno	noranta-u((un, una)	noventa e um	nouazeci ?i unu / una	einundneunzig	ninety-one	naudek unu	91
92	XCII	nonaginta duo	nonante-deux	nonante-deux	nonante-deux	quatre-vingt-douze	nonanta dos	novantadus	novantadue	noventa y dos	noranta-dos(dues)	noventa e dois	nouazeci ?i doi	zweiundneunzig	ninety-two	naudek du	92
Nombre	Nombre romain	Latin	Francophone Suisse (Fribourg, Vaud, Valais)	Francophone Suisse (archaïque)	Francophone Belgique et Suisse (Berne, Genève, Jura)	Français	Occitan	Romanche	Italien	Espagnol	Catalan	Portugais	Roumain	Allemand	Anglais	Espéranto	Nombre

Exemple 3 : Un tableau dans une div limitée en width et height avec `overflow-x: hidden; overflow-y: scroll;`

Avec :

<div style="overflow-x: hidden; overflow-y: scroll; border:#000000 1px solid; width: 500px; height: 500px;">

... ici le tableau ...

</div>

Ce qui donne :

Nombre	Nombre romain	Latin	Francophone Suisse (Fribourg, Vaud, Valais)	Francophone Suisse (archaïque)	Francophone Belgique et Suisse (Berne, Genève, Jura)	Français	Occitan	Romanche	Italien	Espagnol	Catalan	Portugais	Roumain	Allemand	Anglais	Espéranto	Nombre
78	LXXVIII	duodeoctoginta	septante-huit	septante-huit	septante-huit	soixante-dix-huit	setanta uèch	settantotg	settantotto	setenta y ocho	setanta-vuit	setenta e oito	?aptezeci ?i opt	achtundsiebzig	seventy-eight	sepdek ok	78
79	LXXIX	undeoctoginta	septante-neuf	septante-neuf	septante-neuf	soixante-dix-neuf	setanta nòu	settantanov	settantanove	setenta y nueve	setanta-nou	setenta e nove	?aptezeci ?i noua	neunundsiebzig	seventy-nine	sepdek nau	79
80	LXXX	octoginta	huitante	octante	quatre-vingts	quatre-vingts	ochanta	otganta	ottanta	ochenta	vuitanta	oitenta	optzeci	achtzig	eighty	okdek	80
81	LXXXI	octoginta unus	huitante et un	octante-et-un	quatre-vingt-un	quatre-vingt-un	ochanta un	otgantin	ottantuno	ochenta y uno	vuitanta-u((un, una)	oitenta e um	optzeci ?i unu / una	einundachtzig	eighty-one	okdek unu	81
82	LXXXII	octoginta duo	huitante-deux	octante-deux	quatre-vingt-deux	quatre-vingt-deux	ochanta dos	otgantadus	ottantadue	ochenta y dos	vuitanta-dos(dues)	oitenta e dois	optzeci ?i doi	zweiundachtzig	eighty-two	okdek du	82
83	LXXXIII	octoginta tres	huitante-trois	octante-trois	quatre-vingt-trois	quatre-vingt-trois	ochanta tres	otgantatrais	ottantatré	ochenta y tres	vuitanta-tres	oitenta e três	optzeci ?i trei	dreiundachtzig	eighty-three	okdek tri	83
84	LXXXIV	octoginta quattuor	huitante-quatre	octante-quatre	quatre-vingt-quatre	quatre-vingt-quatre	ochanta quatre	otgantaquatter	ottantaquattro	ochenta y cuatro	vuitanta-quatre	oitenta e quatro	optzeci ?i patru	vierundachtzig	eighty-four	okdek kvar	84
85	LXXXV	octoginta quinque	huitante-cinq	octante-cinq	quatre-vingt-cinq	quatre-vingt-cinq	ochanta cinc	otgantatschintg	ottantacinque	ochenta y cinco	vuitanta-cinc	oitenta e cinco	optzeci ?i cinci	fünfundachtzig	eighty-five	okdek kvin	85
86	LXXXVI	octoginta sex	huitante-six	octante-six	quatre-vingt-six	quatre-vingt-six	ochanta sièis	otgantasis	ottantasei	ochenta y seis	vuitanta-sis	oitenta e seis	optzeci ?i ?ase	sechsundachtzig	eighty-six	okdek ses	86
87	LXXXVII	octoginta septem	huitante-sept	octante-sept	quatre-vingt-sept	quatre-vingt-sept	ochanta sèt	otgantaset	ottantasette	ochenta y siete	vuitanta-set	oitenta e sete	optzeci ?i ?apte	siebenundachtzig	eighty-seven	okdek sep	87
88	LXXXVIII	duodenonaginta	huitante-huit	octante-huit	quatre-vingt-huit	quatre-vingt-huit	ochanta uèch	otgantotg	ottantotto	ochenta y ocho	vuitanta-vuit	oitenta e oito	optzeci ?i opt	achtundachtzig	eighty-eight	okdek ok	88
89	LXXXIX	undenonaginta	huitante-neuf	octante-neuf	quatre-vingt-neuf	quatre-vingt-neuf	ochanta nòu	otgantanov	ottantanove	ochenta y nueve	vuitanta-nou	oitenta e nove	optzeci ?i noua	neunundachtzig	eighty-nine	okdek nau	89
90	XC	nonaginta	nonante	nonante	nonante	quatre-vingt-dix	nonanta	novanta	novanta	noventa	noranta	noventa	nouazeci	neunzig	ninety	naudek	90
91	XCI	nonaginta unus	nonante et un	nonante et un	nonante et un	quatre-vingt-onze	nonanta un	novantin	novantuno	noventa y uno	noranta-u((un, una)	noventa e um	nouazeci ?i unu / una	einundneunzig	ninety-one	naudek unu	91
92	XCII	nonaginta duo	nonante-deux	nonante-deux	nonante-deux	quatre-vingt-douze	nonanta dos	novantadus	novantadue	noventa y dos	noranta-dos(dues)	noventa e dois	nouazeci ?i doi	zweiundneunzig	ninety-two	naudek du	92
Nombre	Nombre romain	Latin	Francophone Suisse (Fribourg, Vaud, Valais)	Francophone Suisse (archaïque)	Francophone Belgique et Suisse (Berne, Genève, Jura)	Français	Occitan	Romanche	Italien	Espagnol	Catalan	Portugais	Roumain	Allemand	Anglais	Espéranto	Nombre

Exemple 4 : Un tableau dans une div limitée en width et height avec `overflow-x: scroll; overflow-y: hidden;`

Avec :

<div style="overflow-x: scroll; overflow-y: hidden; border:#000000 1px solid; width: 500px; height: 500px;">

... ici le tableau ...

</div>

Ce qui donne :

Nombre	Nombre romain	Latin	Francophone Suisse (Fribourg, Vaud, Valais)	Francophone Suisse (archaïque)	Francophone Belgique et Suisse (Berne, Genève, Jura)	Français	Occitan	Romanche	Italien	Espagnol	Catalan	Portugais	Roumain	Allemand	Anglais	Espéranto	Nombre
78	LXXVIII	duodeoctoginta	septante-huit	septante-huit	septante-huit	soixante-dix-huit	setanta uèch	settantotg	settantotto	setenta y ocho	setanta-vuit	setenta e oito	?aptezeci ?i opt	achtundsiebzig	seventy-eight	sepdek ok	78
79	LXXIX	undeoctoginta	septante-neuf	septante-neuf	septante-neuf	soixante-dix-neuf	setanta nòu	settantanov	settantanove	setenta y nueve	setanta-nou	setenta e nove	?aptezeci ?i noua	neunundsiebzig	seventy-nine	sepdek nau	79
80	LXXX	octoginta	huitante	octante	quatre-vingts	quatre-vingts	ochanta	otganta	ottanta	ochenta	vuitanta	oitenta	optzeci	achtzig	eighty	okdek	80
81	LXXXI	octoginta unus	huitante et un	octante-et-un	quatre-vingt-un	quatre-vingt-un	ochanta un	otgantin	ottantuno	ochenta y uno	vuitanta-u((un, una)	oitenta e um	optzeci ?i unu / una	einundachtzig	eighty-one	okdek unu	81
82	LXXXII	octoginta duo	huitante-deux	octante-deux	quatre-vingt-deux	quatre-vingt-deux	ochanta dos	otgantadus	ottantadue	ochenta y dos	vuitanta-dos(dues)	oitenta e dois	optzeci ?i doi	zweiundachtzig	eighty-two	okdek du	82
83	LXXXIII	octoginta tres	huitante-trois	octante-trois	quatre-vingt-trois	quatre-vingt-trois	ochanta tres	otgantatrais	ottantatré	ochenta y tres	vuitanta-tres	oitenta e três	optzeci ?i trei	dreiundachtzig	eighty-three	okdek tri	83
84	LXXXIV	octoginta quattuor	huitante-quatre	octante-quatre	quatre-vingt-quatre	quatre-vingt-quatre	ochanta quatre	otgantaquatter	ottantaquattro	ochenta y cuatro	vuitanta-quatre	oitenta e quatro	optzeci ?i patru	vierundachtzig	eighty-four	okdek kvar	84
85	LXXXV	octoginta quinque	huitante-cinq	octante-cinq	quatre-vingt-cinq	quatre-vingt-cinq	ochanta cinc	otgantatschintg	ottantacinque	ochenta y cinco	vuitanta-cinc	oitenta e cinco	optzeci ?i cinci	fünfundachtzig	eighty-five	okdek kvin	85
86	LXXXVI	octoginta sex	huitante-six	octante-six	quatre-vingt-six	quatre-vingt-six	ochanta sièis	otgantasis	ottantasei	ochenta y seis	vuitanta-sis	oitenta e seis	optzeci ?i ?ase	sechsundachtzig	eighty-six	okdek ses	86
87	LXXXVII	octoginta septem	huitante-sept	octante-sept	quatre-vingt-sept	quatre-vingt-sept	ochanta sèt	otgantaset	ottantasette	ochenta y siete	vuitanta-set	oitenta e sete	optzeci ?i ?apte	siebenundachtzig	eighty-seven	okdek sep	87
88	LXXXVIII	duodenonaginta	huitante-huit	octante-huit	quatre-vingt-huit	quatre-vingt-huit	ochanta uèch	otgantotg	ottantotto	ochenta y ocho	vuitanta-vuit	oitenta e oito	optzeci ?i opt	achtundachtzig	eighty-eight	okdek ok	88
89	LXXXIX	undenonaginta	huitante-neuf	octante-neuf	quatre-vingt-neuf	quatre-vingt-neuf	ochanta nòu	otgantanov	ottantanove	ochenta y nueve	vuitanta-nou	oitenta e nove	optzeci ?i noua	neunundachtzig	eighty-nine	okdek nau	89
90	XC	nonaginta	nonante	nonante	nonante	quatre-vingt-dix	nonanta	novanta	novanta	noventa	noranta	noventa	nouazeci	neunzig	ninety	naudek	90
91	XCI	nonaginta unus	nonante et un	nonante et un	nonante et un	quatre-vingt-onze	nonanta un	novantin	novantuno	noventa y uno	noranta-u((un, una)	noventa e um	nouazeci ?i unu / una	einundneunzig	ninety-one	naudek unu	91
92	XCII	nonaginta duo	nonante-deux	nonante-deux	nonante-deux	quatre-vingt-douze	nonanta dos	novantadus	novantadue	noventa y dos	noranta-dos(dues)	noventa e dois	nouazeci ?i doi	zweiundneunzig	ninety-two	naudek du	92
Nombre	Nombre romain	Latin	Francophone Suisse (Fribourg, Vaud, Valais)	Francophone Suisse (archaïque)	Francophone Belgique et Suisse (Berne, Genève, Jura)	Français	Occitan	Romanche	Italien	Espagnol	Catalan	Portugais	Roumain	Allemand	Anglais	Espéranto	Nombre

Exemple 5 : Une image avec `overflow:scroll;`

Avec :

<div style="overflow:scroll; border:#000000 1px solid; width: 280px; height: 250px;">

<img1330|center>

</div>

Ce qui donne :

On voit que cela fonctionne dans l’espace privé mais pas dans l’espace public car les images y sont traitées pas SPIP de manière responsive, c-à-d que leurs dimensions y sont automatiquement ajustées aux valeurs width: 280px; height: 250px; de la div.

Exemple 6 : Une image avec `overflow-x: hidden; overflow-y: scroll;`

Avec :

<div style="overflow-x: hidden; overflow-y: scroll; border:#000000 1px solid; width: 280px; height: 250px;">

<img1330|center>

</div>

Ce qui donne :

Exemple 7 : Une image avec `overflow-x: scroll; overflow-y: hidden;`

Avec :

<div style="overflow-x: scroll; overflow-y: hidden; border:#000000 1px solid; width: 280px; height: 250px;">

<img1330|center>

</div>

Ce qui donne :

Exemple 8 : Un texte avec `overflow:scroll;`

Avec :

<div style="overflow:scroll; border:#000000 1px solid; width: 280px; background-color: #eee; height: 250px;">

... ici le texte ...

</div>

Ce qui donne :

LE CORBEAU ET LE RENARD

Maître Corbeau, sur un arbre perché,
Tenait en son bec un fromage.
Maître Renard, par l’odeur alléché,
Lui tint à peu près ce langage :
Et bonjour, Monsieur du Corbeau,
Que vous êtes joli ! que vous me semblez beau !
Sans mentir, si votre ramage
Se rapporte à votre plumage,
Vous êtes le Phénix des hôtes de ces bois.
À ces mots le Corbeau ne se sent pas de joie,
Et pour montrer sa belle voix,
Il ouvre un large bec, laisse tomber sa proie.
Le Renard s’en saisit, et dit : Mon bon Monsieur,
Apprenez que tout flatteur
Vit aux dépens de celui qui l’écoute.
Cette leçon vaut bien un fromage sans doute.
Le Corbeau honteux et confus
Jura, mais un peu tard, qu’on ne l’y prendrait plus.

SPIP effectue une césure et/ou un retour à la ligne inter-mots automatique du texte, ainsi le texte s’adapte à toutes les largeurs qui lui sont imposées et par conséquent il ne déborde jamais à droite, donc la scrollbar horizontal (présente mais inactive) n’a pas lieu d’être. Par contre la scrollbar verticale est bien présente car elle est nécessaire pour visionner la totalité du texte.

Exemple 9 : Un texte avec `overflow-x: scroll; overflow-y: scroll;`

Avec :

<div style="overflow-x: scroll; overflow-y: scroll; border:#000000 1px solid; width: 280px; background-color: #eee; height: 250px;">

... ici le texte ...

</div>

Ce qui donne :

LE CORBEAU ET LE RENARD

Exemple 10 : Un texte avec `overflow:auto;`

Avec :

<div style="overflow:auto; border:#000000 1px solid; width: 280px; background-color: #eee; height: 250px;">

... ici le texte ...

</div>

Ce qui donne :

LE CORBEAU ET LE RENARD

SPIP effectue une césure et/ou un retour à la ligne inter-mots automatique du texte, ainsi le texte s’adapte à toutes les largeurs qui lui sont imposées et par conséquent il ne déborde jamais à droite, donc la scrollbar horizontal n’a pas lieu d’être. Par contre la scrollbar verticale est bien présente car elle est nécessaire pour visionner la totalité du texte.

Le tableau est tronqué à droite. J’attendrais une barre de défilement horizontale, mais il ne s’en affiche pas !
(Dans : Affichage des tableaux (spip 3.0.17, squelette standard))
https://forum.spip.net/fr_259840.html

Scroll auto sur iPhone, iPod et iPad
6 avril 2010 par ARNO
https://www.paris-beyrouth.org/Scroll-auto-sur-iPhone-iPod-et-iPad

Webographie : scrollbar horizontale placée en haut et en bas des tableaux (avec javascript)

Horizontal scrollbar on top and bottom of table
https://stackoverflow.com/questions/3934271/horizontal-scrollbar-on-top-and-bottom-of-table

What if we want the scroll option on top of the table like it has at bottom ?
(I think there are NO way to do this without using JavaScript.)
https://www.outsystems.com/forums/discussion/27148/what-if-we-want-the-scroll-option-on-top-of-the-table-like-it-has-at-bottom/
- Top Scrollbars
  http://aburt.com/topscrollbar/
- ScrollBarTopAndBottom
  https://eduardojauch.outsystemscloud.com/ScrollBarTopAndBottom/Home.aspx?_ts=636391644021802422

Can you have scrollbars in both parallel sides of a div ? [duplicate]
https://stackoverflow.com/questions/24804500/can-you-have-scrollbars-in-both-parallel-sides-of-a-div

[css-overflow] Positioning Scrollbars on top or left of container #1293
https://github.com/w3c/csswg-drafts/issues/1293

Zone avec scrollbar dans une page html pour afficher un élément (tableau, image,...) trop large

Un élément (tableau, image,...) est trop large pour être affiché complètement

Solution

Notre choix

Exemple 1 : Un tableau trop large avec overflow:scroll;

Exemple 2 : Un tableau dans une div limitée en width et height avec overflow:scroll;

Exemple 3 : Un tableau dans une div limitée en width et height avec overflow-x: hidden; overflow-y: scroll;

Exemple 4 : Un tableau dans une div limitée en width et height avec overflow-x: scroll; overflow-y: hidden;

Exemple 5 : Une image avec overflow:scroll;

Exemple 6 : Une image avec overflow-x: hidden; overflow-y: scroll;

Exemple 7 : Une image avec overflow-x: scroll; overflow-y: hidden;

Exemple 8 : Un texte avec overflow:scroll;

Exemple 9 : Un texte avec overflow-x: scroll; overflow-y: scroll;

Exemple 10 : Un texte avec overflow:auto;

Webographie : Syntaxe CSS

Webographie : CSS - les valeurs de la propriété overflow

Webographie : Créer une zone avec une Scrollbar dans une page html

Webographie : scrollbar horizontale placée en haut et en bas des tableaux (avec javascript)

SPIP

Dans la même rubrique

Exemple 1 : Un tableau trop large avec `overflow:scroll;`

Exemple 2 : Un tableau dans une div limitée en width et height avec `overflow:scroll;`

Exemple 3 : Un tableau dans une div limitée en width et height avec `overflow-x: hidden; overflow-y: scroll;`

Exemple 4 : Un tableau dans une div limitée en width et height avec `overflow-x: scroll; overflow-y: hidden;`

Exemple 5 : Une image avec `overflow:scroll;`

Exemple 6 : Une image avec `overflow-x: hidden; overflow-y: scroll;`

Exemple 7 : Une image avec `overflow-x: scroll; overflow-y: hidden;`

Exemple 8 : Un texte avec `overflow:scroll;`

Exemple 9 : Un texte avec `overflow-x: scroll; overflow-y: scroll;`

Exemple 10 : Un texte avec `overflow:auto;`