Bagaimanakah saya boleh mencipta jadual pengepala tetap dengan bar skrol mendatar dan menegak yang berfungsi dengan betul dalam HTML, CSS dan JavaScript?-tutorial css-php.cn

Bagaimanakah saya boleh mencipta jadual pengepala tetap dengan bar skrol mendatar dan menegak yang berfungsi dengan betul dalam HTML, CSS dan JavaScript?

DDD

Lepaskan： 2024-11-29 21:18:14

asal

996 orang telah melayarinya

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

Jadual pengepala tetap dengan bar skrol mendatar dan bar skrol menegak dihidupkan

Ini ialah soalan tentang mencipta jadual pengepala tetap dengan bar skrol mendatar dan menegak menggunakan HTML, CSS dan JavaScript. Masalahnya ialah apabila bar skrol menegak ditambahkan pada jadual, bar skrol menjadi kucar-kacir.

Kod HTML dan CSS yang disediakan mencipta jadual asas dengan pengepala dan badan, tetapi bar skrol tidak berfungsi dengan betul . Kod JavaScript menambah pendengar acara pada bar skrol supaya apabila pengguna menatal jadual, pengepala akan bergerak bersama-sama dengan badan.

Penyelesaian kepada masalah ini ialah menggunakan gabungan HTML, CSS dan JavaScript . Kod HTML mencipta jadual dan pengepala, dan kod CSS menggayakan jadual dan bar skrol. Kod JavaScript menambah pendengar acara pada bar skrol supaya apabila pengguna menatal jadual, pengepala akan bergerak bersama badan.

Berikut ialah kod HTML yang dikemas kini:

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

Salin selepas log masuk

Di sini ialah kod CSS yang dikemas kini:

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;

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencipta jadual pengepala tetap dengan bar skrol mendatar dan menegak yang berfungsi dengan betul dalam HTML, CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!