Comment puis-je créer un tableau d'en-tête fixe avec des barres de défilement horizontales et verticales à l'aide de 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 à l'aide de JavaScript ?

Susan Sarandon

Libérer： 2024-12-01 11:46:14

original

832 Les gens l'ont consulté

How Can I Create a Fixed Header Table with Both Horizontal and Vertical Scrollbars Using JavaScript?

Tableau d'en-tête fixe avec barre de défilement horizontale et barre de défilement verticale sur le conteneur externe

Il n'existe pas de solution HTML/CSS simple pour créer un tableau d'en-tête fixe avec des barres de défilement horizontales et verticales sur le conteneur extérieur. Une solution possible consiste à utiliser JavaScript pour synchroniser manuellement le défilement des sections d'en-tête et de corps du tableau.

Voici un exemple de la façon dont cela pourrait être réalisé à l'aide de jQuery :

<!DOCTYPE html>
<html>
<head>
    <title>Fixed header table with horizontal scrollbar and vertical scrollbar on outer container</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        tr {
            width: 100%;
        }
        .outer-container {
            background-color: #ccc;
            position: absolute;
            top: 0;
            left: 0;
            right: 300px;
            bottom: 40px;
            overflow: hidden;
        }
        .inner-container {
            height: 100%;
            overflow: hidden;
        }
        .table-header {
            position: relative;
            width: 100%;
        }
        .table-body {
            overflow: auto;
            height: calc(100% - 40px);
        }
        .header-cell {
            background-color: yellow;
            text-align: left;
            height: 40px;
        }
        .body-cell {
            background-color: blue;
            text-align: left;
        }
        .col1, .col3, .col4, .col5 {
            width: 120px;
            min-width: 120px;
        }
        .col2 {
            min-width: 300px;
        }
    </style>
</head>

<body>
    <div class="outer-container">
        <div class="inner-container">
            <div class="table-header">
                <table>

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!