So sperren Sie die erste Zeile und die erste Spalte einer scrollbaren Tabelle mit JavaScript

Sperren der ersten Zeile und ersten Spalte einer Tabelle, wenn Scrollen kann bei großen Tabellen mit wichtigen Informationen oben und links eine nützliche Funktion sein. Während CSS allein dies nicht erreichen kann, bietet JavaScript eine Lösung.

Betrachten Sie das fxdHdrCol-Plugin als potenzielle JavaScript-Lösung. Dieses Plugin wandelt eine Standard-HTML-Tabelle in eine scrollbare Tabelle mit festen Tabellenköpfen und -spalten um. Dadurch kann die Tabelle horizontal und vertikal scrollen, während die erste Zeile und die erste Spalte an Ort und Stelle bleiben.

Um fxdHdrCol zu verwenden, übergeben Sie einfach die folgenden Parameter an das Plugin:

$('#myTable').fxdHdrCol({
    fixedCols    : 3,       /* 3 fixed columns */
    width        : "100%",  /* set the width of the container (fixed or percentage)*/
    height       : 500      /* set the height of the container */
});

Durch Angabe des Parameters „fixedCols“ können Sie die Anzahl der festen Spalten in der Tabelle definieren. Sie können auch die Breite und Höhe des Containers so einstellen, dass er in die Tabelle passt.

Eine vollständige Demonstration und Dokumentation finden Sie unter dem bereitgestellten Link in der Originalantwort. Diese Lösung sperrt effektiv die erste Zeile und die erste Spalte einer Tabelle und sorgt so für ein benutzerfreundlicheres Scroll-Erlebnis.