悩む男性
TablePressで表を作ったけど枠線がないので枠線を付け加えたいのですがどうすればいいですか？
こんな悩みにお答えします。
TablePressは便利なプラグインなので表を作るとボタン１つで記事に入れることができます。
TablePressで表を作ると・・・
実は、デフォルトで表を作ると枠線がありません。
そんな時には、CSSでプログラミングコードを入れて枠線をつ口ます。
すべてのセルの周囲に枠線を付加するには、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;} |
これにより、すべてのセルに枠線が表示されるようになります。
枠線の作り方
めちゃくちゃ簡単です。
step
1TablePressを開く
step
2プラグインのオプション設定に
step
３CSSにプログラミングコードをコピペする
step
4保存してプレビューで完成
TablePress枠線作り：まとめ
TablePressのプラグインはかなり便利なので他にもリンクを入れれたり、列を増やしたり消したりも簡単です。表じたいがコードで記事に入れれたりするのが便利ですね。
