Title: 幅の広いテーブルをスクロールバーを付けて表示するには

固定幅のテーブル（表）をウィンドウ幅の狭いブラウザで表示すると、下図のようにテーブルの端がサイドバーに隠れてしまうことがあります。

幅640pxのテーブルの例

テーブルにスクロールバーを表示し、スクロールしてテーブル全体を見られるようにするには、<table>～</table> タグの前後を <div style="overflow-x: auto;">～</div> で囲ってください。

具体的には次のような手順で編集します。

記事の投稿/編集画面を表示し、[詳細エディタ] の [HTML] アイコンをクリックします。「HTMLの編集」画面が表示されます。

編集画面

HTML ソースの中から該当するテーブル <table>～</table> タグを見つけ、その前後に <div style="overflow-x: auto;"> と </div> を挿入します。（下図の黄色い部分）

また、<table> タグに traction_rs="XXXX" 属性が含まれている場合、これを削除します。（下図の青い部分）

HTMLソースの編集

[更新] をクリックして「HTMLの編集」画面を終了します。

記事の投稿/編集画面に戻るので、[送信] をクリックして記事を投稿します。

下図のように、スクロールバーが表示されます。

スクロールバー付きのテーブル



Attachments:
table_width_scrollbar_01.png
table_width_scrollbar_02.png
table_width_scrollbar_03.png
table_width_scrollbar_04.png
Article: FAQ2064 (permalink)
Categories: :FAQ:表示, :FAQ:スキン:Proteus
Date: 2011/11/28; 17時43分29秒 JST

Author Name: TeamPage サポート
Author ID: jpbo