Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mencipta Jadual Pengepala Tetap dengan Bar Skrol Mendatar dan Menegak Menggunakan JavaScript?
Bagaimanakah Saya Boleh Mencipta Jadual Pengepala Tetap dengan Bar Skrol Mendatar dan Menegak Menggunakan JavaScript?
- Susan Sarandonasal
- 2024-12-01 11:46:14790semak imbas
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>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!