Bagaimana untuk Mencipta Jadual Pengepala Tetap Di Dalam Div Boleh Tatal?

Cara Membuat Jadual Pengepala Tetap Di Dalam Div Boleh Tatal

Untuk membuat pengepala tetap semasa menatal, disyorkan untuk menggunakan dua jadual. Satu untuk pengepala, yang kekal statik dan satu lagi untuk sel kandungan, dibalut dalam div ketinggian tetap dengan limpahan didayakan.

HTML:

<div class="wrap">
    <table class="head">
        <thead>
            <tr>
                <th>Head 1</th>
                <th>Head 2</th>
                <th>Head 3</th>
            </tr>
        </thead>
    </table>
    <div class="inner_table">
        <table>
        <tbody>
            <tr>
                <td>Body 1</td>
                <td>Body 2</td>
                <td>Body 3</td>
            </tr>
            <!-- More table rows here -->
        </tbody>
    </table>
    </div>
</div>

CSS:

.wrap {
    width: 352px;
}

.wrap table {
    width: 300px;
    table-layout: fixed;
}

table tr td {
    padding: 5px;
    border: 1px solid #eee;
    width: 100px;
    word-wrap: break-word;
}

table.head tr td {
    background: #eee;
}

.inner_table {
    height: 100px;
    overflow-y: auto;
}

Pendekatan ini memastikan pengepala statik apabila jadual kandungan ditatal, menghalang kandungan daripada mengaburkan nama lajur yang penting.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Jadual Pengepala Tetap Di Dalam Div Boleh Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!