こんな感じ（イメージ）
| この列が固定 | 列１ | 列2 | 列3 | 列4 | 列5 | 列6 | 列7 | 列8 | 列9 | 列１0 |
|---|---|---|---|---|---|---|---|---|---|---|
| 商品名 | A | B | C | D | E | F | G | H | I | J |
| 価格 | 100円 | 20円 | 80円 | 50円 | 200円 | 150円 | 40円 | 90円 | 100円 | 10,000円 |
*2列目と４列目だけ中央表示しています。（TablePressのオプションにCSSで書込み）
拡張機能（Extensions)を追加
TablePressのFixedColumnsの拡張機能をダウンロードして追加（インストール）。
FixedColumns拡張機能をダウンロード
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で列の幅を%でなく、pxやemなどで設定するのが良いと思います。 列の幅を設定すると、テーブルが画面に収まらなくなり、この列固定水平スクロールが出来るようになります。
[table id=〇〇 datatables_fixedcolumns_left_columns=1 column_widths="100px|200px|200px|200px|200px|200px|200px|200px|200px|200px|200px"/]
（注意2）JavaScriptライブラリの機能を使用する
- この列固定はJavaScriptを使用しているので、列を固定したいテーブルのJavaScriptライブラリの機能は下の図のように☑チェックされていないとい列固定拡張機能（Extension）は動作しません。 TablePressのテーブルを作成するとき、初期値は☑チェック状態です。
- また水平スクロールを☑チェックしなくてもある程度動作するのですが、ブラウザ幅を狭くしたりすると固定列とそれ以外の列の高さがずれたりしたので、これも☑チェックを入れた方が良いです。
（注意3) 行内連結をしたらJavaScriptライブラリの機能が無効になる
#colspan#は表を整理する際に非常に有効な方法ですが、#colspan#を直接記述すると、Javascript機能を使用するにチェックが入っていても、内部的にはJavaScriptは無効になっているので、水平スクロールできません。
また、『同じ行内 (colspan)』のボタンをクリックして、下の図の『OK』を押した瞬間にJavaScript機能の使用のチェックが勝手に外れてしまいます。 よく見たらちゃんと書いてありました。 いつもの『OK』だと思い、『OK』を押して壺にハマりました。( ´艸｀)
おまけ
EnlighterJS, MathJax-LaTex, <textarea>
詳細までの確認はできませんが、私の作ったTablePressの表ではEnglighterJSやMathJax-LaTexやセル一杯の<textarea>を使っても、FixedColumnsは正常に動作しました。（よかったです。）
ヘッダを固定したい場合は
ヘッダー（普通一行目）を固定する方法はTablePressの拡張機能を使う方法とCCSでべた書きしていく方法があります。 拡張機能を使えばヘッダの簡単にですが、TablePressのサイトによるとPremium機能の様で、この機能をダウンロードしようとするとDonation（寄付$3～、推奨$12）画面がでてきて、寄付しないとダウンロードできないようです。こんな画面。
私はそこまでして使いたくないのでどうしてもヘッダを固定したい場合は、CCSを組込む事を考えてみます。
その他のTablePressの拡張機能(Extensions)
ここのページに出ています。 列固定（FixedColumns）はPremiumでないので無償で使えます。
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;
}
コメント