列幅を狭くするスタイル
それではスタイルを作成します。
以下の手順で設定を行ってください。
以前説明したように、いくつかは改行をしないような設定にしておきます。その上で一部の列の最低幅を小さく設定します。
1.対象のテーブルを開きます。
2.上記メニューから、[管理]→[テーブルの管理]をクリックします。
3.[スタイル]タブをクリックします。
4.[新規作成]ボタンをクリックします。
5.タイトルに「列幅設定」等を入力します。
6.以下のスタイルをスタイル欄に入力します。
7.出力先の「全て」のチェックを外し、「一覧」にのみチェックを入れます。
8.[変更]ボタンをクリックします。
9.[スタイル]タブに戻り、[更新]ボタンをクリックします。
ここまでで、設定は完了です。
対象テーブルを開き、一覧を確認すると、設定前は余計な幅を取っていた列が狭くなっていることが確認きます。
#Grid > tbody > tr > td:nth-of-type(3),td:nth-of-type(4),td:nth-of-type(5){
white-space: nowrap;
}
.grid-title-body{
min-width:50px;
}
1~3行目は以前説明した通りで、改行をさせないように設定をしています。
4~6行目で、grid-title-bodyの要素に対して列幅を最低50ピクセルにするという指定をしています。
一覧画面での余計な列幅
こんにちは、CCS田中です。
以前に第13回のブログで一覧画面で改行をしないように設定する方法を説明しました。改行しないように設定した場合に、「ここの列幅がもう少し狭くなってくれた方が良い」ということはないでしょうか?
プリザンターでは、既定で最小列幅がきまっているものがあり(最大列幅も指定されているのですが)、それに引っ張られて入力内容が少ないのに余計な幅を取っている列がでてきてしまうのです。
この余計に幅を取っている列を小さくする方法を説明します。