Maison >interface Web >tutoriel CSS >Comment puis-je créer un tableau d'en-tête fixe avec des barres de défilement horizontales et verticales qui fonctionnent correctement en HTML, CSS et JavaScript ?
Comment puis-je créer un tableau d'en-tête fixe avec des barres de défilement horizontales et verticales qui fonctionnent correctement en HTML, CSS et JavaScript ?
- DDDoriginal
- 2024-11-29 21:18:14998parcourir
Tableau d'en-tête fixe avec barre de défilement horizontale et barre de défilement verticale activées
Il s'agit d'une question sur la création d'un tableau d'en-tête fixe avec des barres de défilement horizontales et verticales à l'aide HTML, CSS et JavaScript. Le problème est que lorsqu'une barre de défilement verticale est ajoutée au tableau, les barres de défilement sont gâchées.
Le code HTML et CSS fourni crée un tableau de base avec un en-tête et un corps, mais les barres de défilement ne fonctionnent pas correctement. . Le code JavaScript ajoute des écouteurs d'événements aux barres de défilement afin que lorsque l'utilisateur fait défiler le tableau, l'en-tête se déplace avec le corps.
La solution au problème consiste à utiliser une combinaison de HTML, CSS et JavaScript. . Le code HTML crée le tableau et l'en-tête, et le code CSS stylise le tableau et les barres de défilement. Le code JavaScript ajoute des écouteurs d'événements aux barres de défilement afin que lorsque l'utilisateur fait défiler le tableau, l'en-tête se déplace avec le corps.
Voici le code HTML mis à jour :
<!DOCTYPE html>
<html>
<head>
<title>Fixed header table with horizontal scrollbar and vertical scrollbar on</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
Ici est le code CSS mis à jour :
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
table {
border-collapse: collapse; /* make simple 1px lines borders if border defined */
}
tr {
width: 100%;
}
.outer-container {
background-color: #ccc;
position: absolute;
top: 0;
left: 0;
right: 300px;
bottom: 40px;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!