こんばんわ。東京事務所の赤田です。

今日はWEB上で、

・エクセル風の見た目
かつ
・文字を折り返さずに一行で表示
して、
・折り返さなかったことで隠れてしまう文字は、列の幅を伸ばすことで見える!
(列幅がドラッグで可変できる)

そんなサンプルをご紹介します。

完成したサンプルの見た目はこんな感じです。
エクセル風の一覧表

ご覧の通り、Companyの列で幅をはみ出した文字が隠れています。
ここでCompanyの列をドラッグして右に引っ張ると、
エクセル風の一覧表2
このように、隠れていた文字が見えるようになります。
大量の項目を冒頭部分だけ表示させたい場合などに使えそうですね。

使用したのは jQuery Grid Plugin です。
かなり高機能なプラグインで、サンプルで紹介している以外にも沢山の機能があります。
ただ、デフォルトのCSSでは文字を折り返さないCSSにはなっていないので、
サンプルソースではその部分だけCSSを追加しています。

サンプルソースは例によってgistにアップしています。


一覧表の列をドラッグで可変できるプラグインはたくさんありますが、
最初から行の文字を折り返さずに、一行で表示できるプラグインは見つからなかったので、
今回紹介してみました。