TablePressの列(column)の固定方法

こんな感じ(イメージ)

この列が固定列1列2列3列4列5列6列7列8列9列10
商品名ABCDEFGHIJ
価格100円20円80円50円200円150円40円90円100円10,000円

*2列目と4列目だけ中央表示しています。(TablePressのオプションにCSSで書込み

拡張機能(Extensions)を追加

TablePressのFixedColumnsの拡張機能をダウンロードして追加(インストール)。

FixedColumns拡張機能をダウンロード

DataTables FixedColumns | TablePress

FixedColumns拡張機能を追加

方法(ショートコードに埋め込み)

インストールして有効化(WordPressの場合)したら、TablePress表示用のショートコードに『datatables_fixedcolumns_left_columns=番号』を入れるだけ。 番号は一番左が1。 複数列固定したい時は、『datatables_fixedcolumns_left_columns=番号』を複数記述する。

一番左の一列目だけ固定したい時の例。

[table id=〇〇 datatables_fixedcolumns_left_columns=1 column_widths="100px|200px|200px|200px|200px|200px|200px|200px|200px|200px|200px"/]

これだけで一番左の列を固定できるので、ややこしいCCSを書いたり、HTMLタグにクラスやidを追加しなくてもいいので簡単です。 下のTablePressのサイトに説明が出ていました。

私は文章を読むのが苦手なので、何でも表にしたいのですが、項目や内容が多かったら表が大きくなるので列固定で横スクロールする表は魅力的です。

(注意1)テーブルの長さ

TablePressの表は水平スクロールしなくても何とか画面の中に収めようと列を細くします。 この場合、水平スクロールは必要ないのでスクロールバーは表示されず列固定水平スクロールはできません。なので細すぎる時は、ショートコードでcolumn_widthsで列の幅を設定するのが良いと思います。 列の幅を設定すると、テーブルが画面に収まらなくなり、この列固定水平スクロールが出来るようになります。

[table id=〇〇 datatables_fixedcolumns_left_columns=1 column_widths="100px|200px|200px|200px|200px|200px|200px|200px|200px|200px|200px"/]

(注意2)JavaScriptライブラリの機能を使用する

  1. この列固定はJavaScriptを使用しているので、列を固定したいテーブルのJavaScriptライブラリの機能は下の図のように☑チェックされていないとい列固定拡張機能(Extension)は動作しません。 TablePressのテーブルを作成するとき、初期値は☑チェック状態です。
  2. また水平スクロールを☑チェックしなくてもある程度動作するのですが、ブラウザ幅を狭くしたりすると固定列とそれ以外の列の高さがずれたりしたので、これも☑チェックを入れた方が良いです。

ヘッダを固定したい場合は

ヘッダー(普通一行目)を固定する方法はTablePressの拡張機能を使う方法とCCSでべた書きしていく方法があります。 拡張機能を使えばヘッダの簡単にですが、TablePressのサイトによるとPremium機能の様で、この機能をダウンロードしようとするとDonation(寄付$3~、推奨$12)画面がでてきて、寄付しないとダウンロードできないようです。こんな画面。

私はそこまでして使いたくないのでどうしてもヘッダを固定したい場合は、CCSを組込む事を考えてみます。

その他のTablePressの拡張機能(Extensions)

ここのページに出ています。 列固定(FixedColumns)はPremiumでないので無償で使えます。

TablePress Extensions | TablePress

おまけ(text-align:center)

TablePressの『プラグインのオプション』に書き込みます。

/*テーブル48の列2と4を中央表示にする場合*/
.tablepress-id-48 .column-2,
.tablepress-id-48 .column-4 {
	text-align: center;
}
/*テーブル48の全ての列を中央表示にする場合*/
.tablepress-id-48 td {
       text-align: center;
}
/*全てのテーブルのヘッダ(一番上の行)を中央表示にする場合*/
.tablepress thead th {
	color: dimgray;
	text-align: center;
	margin-right: 0 !important;
}

コメント

タイトルとURLをコピーしました