Zurb Foundation - 固定ヘッダーと最初と最後の列が固定されたレスポンステーブル

Question

私はZurb Foundationを使用してWebアプリケーションを作成していて、小さな問題を抱えています。

固定ヘッダーと最初と最後の列が固定された応答可能なテーブルを持つ必要があります。その間の他の列は、幅が小さすぎるとスクロール可能です。

これはCSSだけで可能ですか？

Answer 1

この問題を解決するにはJSFiddleをご覧ください。

あなたが望む効果を見るために画面を縮小してください。唯一の問題は、ヘッダーが固定されているときに右にスクロールしないことです。テーブルからfixed-headerクラスを削除して、固定ヘッダーエフェクトを削除することができます。この場合、水平スクロールが正しく機能します。

警告：ユーザーが通じスクロールするために余分な列があることを知ってしなければならないので個人的に私は、このアプローチをお勧めしません。さらに、ユーザーは隠れた列を表示する方法も知らないかもしれません（水平スクロールはテーブルに直観的ではありません）。

代替：このアプローチの背後にある理論的根拠は、モバイルデバイスに大きなテーブルを表示できることです。この場合、大きなテーブルを2列のレイアウトに折りたたむ別のソリューションをお勧めします。

次のCodePenスニペットをご覧ください。私はこの戦略を自分のプロジェクトで常に使用しています。

Simple Responsive Table