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

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:

    <title>Fixed header table with horizontal scrollbar and vertical scrollbar on</title>
    <link rel="stylesheet" href="style.css">


<div>
<p>Hier ist der aktualisierte CSS-Code:</p>
<pre class="brush:php;toolbar:false">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;