TablePressで作成したテーブルの枠線が表示されないこともあります。これはテーマのCSSに依存します。

つまり、「TablePressで作成したテーブルに枠線を付加したい」という場合、使用中のテーマのCSSにも気を配る必要があります。

次の例はテーマがTwenty Twelveですが、TablePressで作成したテーブルの左右の枠線が消えています。

テーブルの左側の枠線が表示されない

テーブルの左側の枠線が表示されない

ブラウザのインスペクタ(要素を調査)を使ってテーブルのCSSを調べてみると、

  • TablePressのCSSでは枠線をなしに(1)
  • Twenty TwelveのCSSではテーブルの下線を引く(2)

となっています。

TablePressとTwenty Twelveの枠線に関するCSS

TablePressとTwenty Twelveの枠線に関するCSS

同じようにしてtrタグやtdタグに対する枠線(border)を調べていくと、作成したテーブルの横線(セルの上の線)のみが設定されていることがわかります。

テーブル全体に枠線を表示するには、次のようなCSSを子テーマのstyle.cssなどに追加します。

/* テーブルに枠線を表示する */
.entry-content table {
    border: 1px solid #EDEDED;
}

ブラウザのインスペクタからCSSをコピーできます。ペーストして「border-bottom」を「border」に変更すれば簡単に作業できます。

テーブル全体に枠線が表示される

テーブル全体に枠線(外枠)が表示される

うまくいったことが確認できたら、色(ここでは「#EDEDED」)などを自由に変更しましょう。

スポンサーリンク

すべてのセルに枠線を付加する

すべてのセルの周囲に枠線を付加するには、TablePressで設定されているスタイルをカスタマイズする必要があります。

tdタグやthタグに細かくCSSが記述されているので、1つずつピックアップして、新たなCSSを記述します。

ただし、Twenty TwelveとTablePressの関係では、TablePress(または子テーマ)のstyle.cssよりもTablePressのCSSファイルの方が後に読み込まれるため、同じセレクタでCSSを指定しても、TablePressのCSSを上書きできません。

そこで、セレクタを詳細に指定するか、「!important」を付加して優先度を上げる工夫が必要です。次の例では「!important」を指定しています。

/* すべてのセルに枠線を付加する */
.tablepress thead th,
.tablepress tbody tr:first-child td,
.tablepress tbody td,
.tablepress tfoot th {
    border: 1px solid black !important;
}

これにより、すべてのセルに枠線が表示されるようになります。

テーブルのすべてのセルに枠線を付加

テーブルのすべてのセルに枠線を付加

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPressの使い方・カスタマイズ・トラブル対応など、ご相談ください。
お問い合わせはこちらから
【対応料金の見積もりは無料です】
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク