Ich schreibe eine Web-App mit Zurb-Stiftung und stieß auf ein kleines Problem.Zurb Foundation - Responsive Tabelle mit festen Header und festen ersten und letzten Spalte
Ich muss in der Lage sein, eine reaktionsfähige Tabelle mit einem festen Header und festen ersten und letzten Spalten mit den anderen Spalten zwischen Scrollen zu haben, wenn die Breite zu klein ist.
Ist dies mit nur CSS möglich?
Überprüfen Sie diese JSFiddle für eine Lösung für Ihr Problem.
Schrumpfen Sie Ihren Bildschirm, um den gewünschten Effekt zu sehen. Das einzige Problem damit ist, dass wenn der Header behoben ist, es nicht nach rechts scrollt. Sie können die Klasse fixed-header aus der Tabelle entfernen, um den festen Header-Effekt zu entfernen. In diesem Fall funktioniert das horizontale Scrollen ordnungsgemäß.
WARNUNG: Persönlich würde ich diesen Ansatz nicht empfehlen, weil der Benutzer zu wissen hätte, dass es zusätzliche Spalten zu durchgeblättert. Außerdem kann der Benutzer nicht einmal wissen, wie die versteckten Spalten angezeigt werden sollen (das horizontale Scrollen ist für Tabellen nicht intuitiv).
ALTERNATIVE: Ich gehe davon aus, dass die Gründe für diesen Ansatz in der Lage ist, eine große Tabelle auf einem mobilen Gerät zu zeigen, in diesem Fall würde ich eine andere Lösung einsturz großen Tabellen in einem zweispaltigen Layout empfehlen .
Überprüfen Sie das folgende CodePen-Snippet. Ich benutze diese Strategie die ganze Zeit in meinen Projekten.