ブログ記事内の表は、背景色が交互に違う方が行ごとにすっきりして見やすくなるんですよね。
今回は、以前の自分の記事を見返していたときに、表の背景色を交互に変える設定にしていたのに、全部白のままの状態の記事がありましたので修正しました。
1.背景色が白いまま
TablePressで表（テーブル）を作っている際に、冒頭のメイン画像のように、「白、グレー、白、グレー」というように背景色を交互に変えようと思いました。
でも、設定で以下のようにチェックを入れても、現実は下の画像のように表の背景色は真っ白のままだったのが事の始まり。
☑ 連続する行の背景色を別々の色にする
検索しても解決方法が出てこないので、自分で設定を変えて試行錯誤してみたら何度目かで原因がわかりました。
原因は、さらに先にある別の設定項目にチェックが入っていたことでした。
2.設定状態の確認
表の背景色が真っ白だった原因を、「TablePressの設定」の部分で探ってみました。
① 「連続する行の背景色を別々の色にする」
下の画像のように、 ①の欄に ✓ が入っていたのは正しいです。
「テーブルのオプション」の「行の色を交互にする」という所で「連続する行の背景色を別々の色にする」という空欄にチェックを入れます。
②「このテーブルで以下のDataTables JavaScriptライブラリ機能を使用する 」
②の欄に ✓ が入っていたのが間違いでした。
「DataTables JavaScriptライブラリの機能」の「DataTablesを使用」という所で「このテーブルで以下のDataTables JavaScriptライブラリ機能を使用する」という欄は空欄のままでないといけないようです。
3.正しい設定
設定が間違っていた部分に気付いた後にすぐに直して、下の画像の状態にしました。
①チェックが入っている
②チェックが入っていない
これで表の背景色が交互に表示されるはずです。
4.修正結果
下の画像のように、当初の狙い通りに、表の背景色が行ごとに白とグレーで交互に変わるようになりました。
「グレーが若干薄い」という指摘も出てきそうですが、右の方に「グレー」と書かれた行の全体に色が付いていますよね。
全て白の状態よりも見やすくなったと思います。
これで修正は完了です。
この記事は以上になります。
最後まで読んでいただき、ありがとうございました。