Comment afficher uniquement les barres de défilement horizontales dans un élément CSS Div ?

Comment afficher les barres de défilement horizontales uniquement dans un élément CSS Div

Vous disposez d'un conteneur div avec le style CSS suivant :

div#tbl-container 
{
    width: 600px;   
    overflow: auto;    
    scrollbar-base-color:#ffeaff
}

Ce style affiche automatiquement les barres de défilement horizontales et verticales lorsque vous remplissez le tableau contenu dans le div. Cependant, vous souhaitez que seules les barres de défilement horizontales apparaissent automatiquement, ce qui vous laisse modifier la hauteur du tableau par programme.

Le comportement attendu est de n'avoir des barres de défilement horizontales que lorsque le contenu est suffisamment grand pour les nécessiter. Cependant, vous rencontrez ce problème principalement dans Internet Explorer (IE) en raison d'un bug. La vérification dans d'autres navigateurs comme Firefox aidera à isoler le problème.

À partir d'IE6-7, vous avez la possibilité de définir les barres de défilement indépendamment à l'aide de l'extension CSS3 proposée :

overflow: auto;
overflow-y: hidden;

Pour la compatibilité avec IE8 , vous devrez peut-être également ajouter :

-ms-overflow-y: hidden;

Microsoft sépare les propriétés pré-standard CR dans leur propre boîte « -ms » en mode standards IE8.

En fin de compte, IE8 a peut-être résolu ce bug, mais l'utilisation de ces propriétés fournit une solution de contournement pour IE6-7 ou version antérieure.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!