Wie kann ich mit JavaScript eine feste Kopfzeilentabelle mit horizontalen und vertikalen Bildlaufleisten erstellen?-CSS-Tutorial-php.cn

Wie kann ich mit JavaScript eine feste Kopfzeilentabelle mit horizontalen und vertikalen Bildlaufleisten erstellen?

Susan Sarandon

Freigeben： 2024-12-01 11:46:14

Original

766 Leute haben es durchsucht

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

Feste Header-Tabelle mit horizontaler Bildlaufleiste und vertikaler Bildlaufleiste am Außencontainer

Es gibt keine einfache HTML/CSS-Lösung zum Erstellen einer festen Header-Tabelle mit horizontalen und vertikalen Bildlaufleisten am äußeren Container. Eine mögliche Lösung besteht darin, JavaScript zu verwenden, um das Scrollen der Kopf- und Textabschnitte der Tabelle manuell zu synchronisieren.

Hier ist ein Beispiel, wie dies mit jQuery erreicht werden könnte:

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript eine feste Kopfzeilentabelle mit horizontalen und vertikalen Bildlaufleisten erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!