8.テーブルのレスポンシブ化への考察

旧QHMでのテーブル表示をレスポンシブル・テーブルに変更する。

旧QHMでのテーブルの例

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも

新haikでのテーブルの例

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも

新旧を比較する

旧QHMでのテーブル

|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|

新haikでのテーブル

|STYLE:responsive|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|

解説します。

新haikでのテーブルの先頭に以下の一行を追加してレスポンシブレイアウトが実現できています。

|STYLE:responsive|

画面を横幅300pxぐらいに縮小して上下のテーブルを比較してご覧戴くと、haikでのテーブルには横スクロールボタンが付加されていると思います。それがレスポンシブレイアウトになった結果です。