Rendre le tableau HTML défilable

Cet article présentera une méthode pour créer un tableau HTML à défilement vertical.

Définissez la propriété CSS overflow-y sur scroll pour rendre le tableau HTML défilable

Lorsqu’un tableau HTML est long, une fonctionnalité permettant de faire défiler uniquement le tableau, et non la page entière, est nécessaire. Pour réaliser cette fonctionnalité, on peut utiliser la propriété overflow-y.

Ici, y représente l’axe y. La propriété définit la propriété de débordement d’un élément de niveau bloc le long de l’axe vertical.

La valeur scroll rend l’élément de niveau bloc défilable de haut en bas.

Pour rendre un tableau HTML déroulant verticalement, nous pouvons envelopper le tableau avec un <div>. Ensuite, nous pouvons définir une hauteur fixe pour la <div> en utilisant la propriété height.

Après cela, nous pouvons définir la propriété overflow-y sur scroll. Si la hauteur du tableau dépasse la hauteur de la div que nous avions définie, alors le overflow-y: scroll rendra le tableau défilable dans la direction y (verticalement).

Par conséquent, nous devons nous assurer que la hauteur du tableau dépasse la hauteur du <div>.

Par exemple, créez un div et donnez-lui le nom de classe container. A l’intérieur de cette div, créez une table et donnez-lui un nom de classe data.

Remplissez le tableau avec des données en utilisant les balises tr, th et td.

En CSS, sélectionnez la classe container et définissez sa propriété height sur 70px et sa propriété overflow-y sur scroll. Assurez-vous que le contenu du tableau a une hauteur supérieure à 70px.

Sélectionnez ensuite la table à l’aide du sélecteur de classe et des éléments th et td de la table. Ensuite, définissez sa propriété border sur 1px solid black, la propriété border-collapse sur collapse et padding sur 4px. (Remarque : ce n’est pas obligatoire, c’est pour rendre le tableau plus lisible.)

L’exemple ci-dessous montre que le tableau est défilable verticalement, car la hauteur du tableau est supérieure à celle du div ou du .container.

Exemple de code :

<div class="container">
<table class="data">
<tr>
 <th>id</th>
 <th>Name</th>
 <th>Country</th>
</tr>
<tr>
 <td>1</td>
 <td>John Doe</td>
 <td>Nepal</td>
</tr>
<tr>
 <td>2</td>
 <td>Sam Smith</td>
 <td>India</td>
</tr>
<tr>
 <td>3</td>
 <td>Jack Daniels</td>
 <td>China</td>
</tr>
</table>
</div>

.container {
 height: 70px;
 overflow-y: scroll;
}
.data, th, td {
 border: 1px solid black;
 border-collapse: collapse;
 padding: 4px;
}

Par conséquent, l’ensemble du tableau n’est pas visible lorsque nous chargeons la page. C’est parce que nous avons défini 70px comme hauteur du conteneur.

Mais lorsque nous faisons défiler verticalement, nous pouvons voir le reste du contenu du tableau.

De cette façon, nous pouvons rendre le tableau HTML défilable verticalement en utilisant la propriété overflow-y et en la définissant sur scroll.