kuroの覚え書き

96の個人的覚え書き

テーブルの処理(横幅、スクロールなど)

UIの注文がいろいろ出てきたのでそれに対応。

とりあえず表示させるカラムを選択できるようになって横幅にゆとりは出たが、1カラムで横幅を取っているカラムを表示させると、やっぱり狭くてみにくい。

行内でおりかえすかスクロールバーを付けるなりしたいところ。

これはスタイルシート一発でいけそう。

<style type="text/css">
.sc_ref {
max-width: 100px;
word-wrap:break-word;
}
.sc_det {
max-width: 250px;
overflow: scroll;
}
</style>

こういうスタイルを設定しておいて、実際に横幅を指定したりスクロールをつけたいセル(カラム=tdタグ内)に

<td><div class=sc_ref>{{ samp.REF }}</div></td>

こんな感じにdivタグを入れる。

そうすると
word-wrap:break-word;
なら単語の途中でも強制改行されるし
overflow: scroll;
なら、カラムの中にスクロールバーが追加される。

カラムの端っこを摘んでドラッグで幅を変える事ができるようになるjavascriptも世の中にあるにはあるが、他の機能との折り合いがつかないため、現状これが妥協点かな。

強制改行かスクロールかは内容次第で使い分ける。
改行のほうが一覧性はあるが、行が広く取られる。一方スクロールは隠れる分、見にくくはなるが、行が増えないので、より多くの行を一気に表示させることができる。
そう考えると、やはりドラッグで幅を変えられる方がいいよな。