HTML table avec un défilement horizontal

Tables HTML

• Les tables sont un élément hypertext markup language constitué de lignes et de colonnes. Quand une ligne et de la colonne se croisent, ils forment une cellule. Cette cellule contient alors textes, images, liens et autres éléments. Une table peut être constitué d'une seule cellule - d'une rangée et la colonne - ou un nombre illimité de cellules. Le code de base pour une table est le suivant:

  
  
  
  
  
  

  Cellule 1, ligne 1	Cell 2, rangée 1
  Cellule 1, ligne 2	Cell 2, Row 2

Scrollbar Comportement

• Par défaut, la plupart des conteneurs - y compris les couches de div - créeront des barres de défilement horizontal et vertical lorsque le contenu à l'intérieur du conteneur est plus grand que le conteneur lui-même. Cela permet à vos visiteurs de défilement pour afficher le reste du contenu coupé, sans extension de la taille du conteneur et à briser éventuellement la mise en page de votre page. Lorsque le contenu est inférieur au conteneur, aucune barre de défilement apparaît. Cependant, les tableaux ne montrent jamais les barres de défilement, même lorsque vous forcez une barre de défilement avec le code. Ainsi, vous devez placer toute votre table dans un autre récipient, comme une div, pour donner l'apparence d'une table de défilement.

Défilement Conteneurs

• 
  
  
  
  

  Vous pouvez introduire une barre de défilement horizontale à votre élément contenant, même si cet élément ne serait pas naturellement avoir une barre de défilement avec des feuilles de style en cascade ou CSS. Pour appliquer une barre de défilement sur le récipient, ajoutez la propriété de style "volute" avec la valeur "volute" et placer la table à l'intérieur du récipient, comme dans l'exemple suivant:

  
  
  
  
  

  Cellule 1, ligne 1

  Cell 2, rangée 1

  
  

  Ce code va appliquer à la fois une barre de défilement horizontale de la table, ce qui permet à vos visiteurs de voir l'intégralité du contenu.

Considérations

• Notez que la définition de la "débordement" immeuble à "auto" se produire à la fois une barre de défilement vertical et horizontal de sorte que vous devez cacher la barre de défilement verticale, sur le "Y" axe. Cette méthode fonctionne mieux si votre récipient div est légèrement plus grand que votre table et aussi longtemps que le tableau est plus large que la div. Sinon, la barre de défilement ne apparaîtra. Vous pouvez forcer les flèches de défilement à apparaître, mais ils ne seront pas actifs, si vous définissez la valeur de débordement pour "volute" au lieu de "auto."