Bagaimanakah Saya Boleh Mencipta Jadual Pengepala Tetap dengan Bar Skrol Mendatar dan Menegak Menggunakan JavaScript?-tutorial css-php.cn

Bagaimanakah Saya Boleh Mencipta Jadual Pengepala Tetap dengan Bar Skrol Mendatar dan Menegak Menggunakan JavaScript?

Susan Sarandon

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

asal

761 orang telah melayarinya

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

Jadual pengepala tetap dengan bar skrol mendatar dan bar skrol menegak pada bekas luar

Tiada penyelesaian HTML/CSS mudah untuk mencipta jadual pengepala tetap dengan kedua-dua bar skrol mendatar dan menegak pada bekas luar. Satu penyelesaian yang mungkin adalah menggunakan JavaScript untuk menyegerakkan secara manual tatal bahagian pengepala dan badan jadual.

Berikut ialah contoh cara ini boleh dicapai menggunakan 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>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Jadual Pengepala Tetap dengan Bar Skrol Mendatar dan Menegak Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!