Heim >Web-Frontend >CSS-Tutorial >Wie kann ich mit JavaScript eine feste Kopfzeilentabelle mit horizontalen und vertikalen Bildlaufleisten erstellen?
Wie kann ich mit JavaScript eine feste Kopfzeilentabelle mit horizontalen und vertikalen Bildlaufleisten erstellen?
- Susan SarandonOriginal
- 2024-12-01 11:46:14763Durchsuche
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>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!