Wie kann ich eine Tabelle mit festen Kopfzeilen mit horizontalen und vertikalen Bildlaufleisten erstellen, die in HTML, CSS und JavaScript korrekt funktionieren?-CSS-Tutorial-php.cn

Wie kann ich eine Tabelle mit festen Kopfzeilen mit horizontalen und vertikalen Bildlaufleisten erstellen, die in HTML, CSS und JavaScript korrekt funktionieren?

DDD

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

Original

996 Leute haben es durchsucht

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

Feste Kopfzeilentabelle mit aktivierter horizontaler und vertikaler Bildlaufleiste

Dies ist eine Frage zum Erstellen einer festen Kopfzeilentabelle mit horizontalen und vertikalen Bildlaufleisten HTML, CSS und JavaScript. Das Problem besteht darin, dass die Bildlaufleisten durcheinander geraten, wenn der Tabelle eine vertikale Bildlaufleiste hinzugefügt wird.

Der bereitgestellte HTML- und CSS-Code erstellt eine einfache Tabelle mit einer Kopfzeile und einem Textkörper, aber die Bildlaufleisten funktionieren nicht richtig . Der JavaScript-Code fügt den Bildlaufleisten Ereignis-Listener hinzu, sodass sich die Kopfzeile zusammen mit dem Text bewegt, wenn der Benutzer durch die Tabelle scrollt.

Die Lösung des Problems besteht darin, eine Kombination aus HTML, CSS und JavaScript zu verwenden . Der HTML-Code erstellt die Tabelle und den Header und der CSS-Code formatiert die Tabelle und die Bildlaufleisten. Der JavaScript-Code fügt den Bildlaufleisten Ereignis-Listener hinzu, sodass sich die Kopfzeile zusammen mit dem Text bewegt, wenn der Benutzer in der Tabelle scrollt.

Hier ist der aktualisierte HTML-Code:

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

Nach dem Login kopieren

Hier ist der aktualisierte CSS-Code:

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;

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich eine Tabelle mit festen Kopfzeilen mit horizontalen und vertikalen Bildlaufleisten erstellen, die in HTML, CSS und JavaScript korrekt funktionieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!