HTML-Tabelle mit fester Kopf- und Fußzeile und scrollbarem Körper ohne feste Breite

Ich möchte eine Tabelle mit einem festen thead und tfoot und einem scrollbaren tbody ! erstellen!

Ich habe mehrere Ansätze ausprobiert, CSS und CSS + Javascript, aber sie sind alle schwach und unzuverlässig und ich kann sie leicht durch das Ändern der Markup in der Demo brechen .

Was ich möchte, ist eine Möglichkeit, dass die Tabelle sich wie eine Tabelle verhält . Das bedeutet, dass der Browser Spalten basierend auf dem Inhalt (beide auf der Seite) automatisch anpasst lade das bei Fenstergrößenänderung) und in diesen Szenarien:

1. Wenn der Inhalt der Spaltenüberschrift ( thead > tr > th ) größer als der Inhalt des Spaltenhauptteils ( tbody > tr > td ) und größer als der Inhalt der Spaltenfußzeile ( tfoot > tr > td ) ist, sollte die Größe der Spalte geändert werden basierend auf der Größe der Spaltenüberschrift

2. Wenn der Inhalt des Spaltenhauptteils ( tbody > tr > td ) größer ist als der Inhalt des Spaltenheaders ( thead > tr > th ) und größer als der Inhalt der Spaltenfußzeile ( tfoot > tr > td ), sollte die Größe der Spalte geändert werden basierend auf der Größe des Spaltenkörpers

3. Wenn der Inhalt der Fußzeile der Spalte ( tfoot > tr > td ) größer ist als der Inhalt der Spaltenkopfzeile ( thead > tr > th ) und größer als der Inhalt des Spaltenhauptteils ( tbody > tr > td ), sollte die Größe der Spalte geändert werden basierend auf der Größe der Fußzeile der Spalte

Die table unten sollte die Szenarien verdeutlichen:

Ich möchte eine saubere (wie möglich) und zuverlässige Lösung, die für die verschiedenen Szenarien funktioniert, möglicherweise nur CSS, aber auch JavaScript ist in Ordnung (Vanille und sauberes JavaScript, nicht jQuery-Plugins). Die alte Browser-Unterstützung ist mir egal (es wäre großartig, sie zu haben oder zumindest eine Lösung zu finden, die sich im alten Browser zwar abbauen kann, aber optional ist) ... Ich kann sogar akzeptieren, div s statt zu verwenden Tabellenknoten, wenn die endgültige Lösung wie erwartet funktioniert ... also 2016 mit modernem Browser und CSS ist das irgendwie möglich?!

BEARBEITEN:

Der Körper sollte vertikal scrollen und die Tabelle darf beliebig viele Spalten haben

UPDATE:

Ich habe diese Lösung gefunden: Ссылка aber ich bin immer noch nicht zu 100% zufrieden. Das Hauptproblem ist, dass ich keine unterschiedlichen Hintergründe für Kopf- und Fußzeilenzellen festlegen kann.

UPDATE 2:

es funktioniert jetzt!