• このエントリーをはてなブックマークに追加
  • LINEで送る

横長の表のモバイル端末における処理

table-responsive

横長の表はスマートフォンなどでは幅が足りず困りものです。

二列程度ならグリッドシステムで段落ちさせれば良いですが、項目が多い場合はこれを指定しておくと、幅が足りなくなれば自動で横スクロールバーが付きます。

モバイルのと銘打っていますが、パソコンでも幅た足りなくなれば横スクロールバーが表示されます。

texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext
texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext
      
texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext
texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext

領域の幅以上にデータがあるため、パソコンでも横スクロールバーが表示される

texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext
texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext