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 ?-tutoriel CSS-php.cn

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 ?

DDD

Libérer： 2024-11-29 21:18:14

original

1106 Les gens l'ont consulté

How can I create a fixed header table with both horizontal and vertical scrollbars that function correctly in HTML, CSS, and JavaScript?

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>

Copier après la connexion

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;

Copier après la connexion

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!