TablePress 表全体の幅とカラム幅の指定方法

表全体の幅指定方法

ショートコード内に記述

以下のショートコード内にwidth=”100%”と記述すると、表示幅が広がる事があります。 しかし、私の場合、何故か時々効かない場合もあったので、次項の『プラグインのオプションCSSで指定』で簡単に動作できました。

[table id=◯◯ width="100%" /]

このようにギリギリまで表示できます。

下のショートコードは、幅100%で、各カラムの比率を%で指定すると上の図の様な比率になる。

[table id=4 width="100%" column_widths ="8%|15%|27%|50%"]

プラグインのオプションのCSSで指定

TablePressの『プラグインのオプション』にCSSで指定する。

全てのテーブルで幅指定

上記の例は、idを指定していないので、全てテーブルが指定幅になります。(これでもまだ100%表示にならない場合は、100%の後に半角スペースを入れて!importantを追加する。)

.tablepress {
width: 100%;
}

指定したidのテーブルだけ幅指定

-id-〇〇で指定したテーブルだけ幅を指定。 

.tablepress-id-◯◯ {
width: 100%;
}

複数のテーブルの幅を指定したいときは、テーブルidをカンマ”,”で区切って列挙する。

.tablepress-id-◯◯,
.tablepress-id-◯◯,
.tablepress-id-◯◯
 {
width: 100%;
}

各列の幅の指定

ショートコードの中に、column_widthsで各縦列の幅の比率を指定できます。(%,px) 私の場合、プラグインのオプションで全ての表の全体幅を100%に設定して、各表のカラム(列)幅だけを各ショートコードに記述しています。

[table id=◯◯ column_widths="30%|20%|50%" /]

[table id=◯◯ column_widths="120px|200px|300px" /]

カラム幅設定が正しく動作しない場合

ワードプレスのプラグインnoTablePressは自動的に幅を調節してしまうので、上記の幅設定が正しく動作しない場合があります。 そんな時は、以下コードをTablePressのプラグインのオプションのカスタムCSSに追加すると、自動調節が無効となるので、上記幅設定が正しく動作する事があります。 しかし、全てのTablePressの表の幅設定をしてやらないといけません。

table-layout:fixed;

おまけ1 それでも100%にならない時は!important

100%の後に、半角スペースを入れて!importantを付ける。 余り、!importantを多用するのは望ましくないらしいですが、!importantを付けて強制力を上げれる事があります。

.tablepress-id-◯◯ {
width: 100% !important;
}

おまけ2 縦線の表示方法

TablePressの表で縦線が表示されず、見づらい表になる場合があります。 そんな時、以下コードをTablePressのプラグインのオプションのカスタムCSSに追加すると、縦線が表示されます。 gainsboro(#dcdcdc)は薄いグレー色です。 色のキーワード指定以外にも、6桁の16進数や#cccの3桁のショートコードも使用できます。 solid以外もdotted, dashed等も使用できます。

.tablepress td,
.tablepress th {
	border: 1px solid gainsboro;
}

これで、以下の図のように縦横の線が表示されます。

おまけ3 列(columns)や行(rows)の非表示・非表示

ショートコードに記述。

[table id=2 hide_columns="1,2,3" show_rows="4,5,6" /]

大きなテーブルを作って、複数個所で表示する時に表示ヵ所ごとに表示する列等を非表示する。 テーブルを一元管理でき、何度も同じ列を作らなくて良い。

コメント

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