Ici & Là

01 Société 02 Histoire 03 Science 04 Science fiction 05 SPIP 06 NTIC 07 Sondages 08 Divers
La meilleure façon de réaliser ses rêves est de se réveiller (Paul Valéry)

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
6 votes

 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 :

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 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 :

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 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

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 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

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 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.


 Webographie : Syntaxe CSS


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


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

  • 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

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