Wie mache ich die Kopfzeile einer horizontal scrollbaren Tabelle klebrig? ⇐ CSS

[Anonymous]

Nehmen wir an, Sie hätten ein einfaches Layout mit einer festen Kopfzeile und einem scrollbaren Hauptcontainer. Innerhalb des Hauptinhalts möchte ich eine Tabelle (horizontal scrollbar) mit einem Sticky-Header rendern. Wie ist das möglich?
Ich habe die folgende JSFiddle vorbereitet, um das Problem zu demonstrieren.
Ich vermute, das ist der Grund, warum es nicht funktioniert (siehe Dokumentation:)

Beachten Sie, dass ein Sticky-Element an seinem nächsten Vorfahren „klebt“, der über einen „Scroll-Mechanismus“ verfügt (erstellt, wenn der Überlauf ausgeblendet, Scroll, Auto oder Overlay), auch wenn dieser Vorfahre nicht der nächste tatsächlich scrollende Vorfahre ist.

Ich frage mich, ob es im Jahr 2025 eine Problemumgehung gibt, um dies zu erreichen?