テーブルの横スクロール機能

キャプチャ画像

横に長~いテーブル(表)があったとします。

 

PCブラウザなら何も問題はないんですが、画面幅の狭いiPhone(スマホ)では自動的にテーブル(表)が横縮小されて文字が見にくくなってしまいます。

 

この問題を解決してくれるのが、
SIRIUS ver.1.5から搭載された「テーブルを横スクロールさせる」機能です。


横スクロールバーの威力

たとえばこちらのように横に長いテーブル(表)があったとします。

 

キャプチャ画像

 

PCでは問題なく表示されますが、iPhone(スマホ)ではご覧の通り、
自動的にセル幅が狭められてとても読みにくくなってしまいました。

 

キャプチャ画像

 

それではと、一度にできるだけ全体が見渡せるようにフォントを小さくしてみたら、
案の定、文字が小さすぎてとても読みにくいです。

(下のはキャプチャ画像なのでさらに文字がつぶれちゃってます)

 

キャプチャ画像

 

ここで登場するのがSIRIUSの『テーブルを横スクロールする』機能です。

 

設定方法

すでに出来ているテーブルタグを全選択した後、
右クリックメニューから『テーブルを横スクロールする』を選択するだけでOK。

 

キャプチャ画像

 

これで横スクロールバーが付いたテーブルに切り替わります。

 

キャプチャ画像

 

これならどれだけテーブル(表)の横幅が広がっても問題ないですね。

 

ただしこの機能はiPhone(スマホ)で見た時にのみ有効となる機能です。

 

PCやiPad(タブレット)では通常のテーブルとして表示されます。

 

解除

『テーブルを横スクロールする』機能を解除するには
該当する専用タグを削除する必要があります。

 

削除するタグは先頭の<div class="scroll_table">と最後の</div>です。

(下の画像にもあるように、コメントアウトも削除しておいた方がわかりやすいでしょう)

 

キャプチャ画像

デザインモード上では、テーブルを選択した状態で右クリックすると「横スクロールを解除する」という選択肢が出てきます。

 

そこをクリックすれば通常のテーブル(表)に戻ります。

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSカスタムテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください

 この記事をシェア 
キャプチャ画像

PC版レイアウトに切替

スマホ版レイアウトに切替