【編集】 base.css

賢威7.1のテーブル

賢威7.1では、綺麗なテーブルが標準で装備されています。

テーブルの高さや文字をCSSでカスタマイズする

これはこれで見やすく綺麗なのですが、項目内容によっては、もう少し高さを低くしたいとか、文字位置を変えたいとか思ってしまうのですね。

テーブルの行の高さを変更する

一番変えたいと思ったのは行の高さです。
上のテーブルの場合、たった3行ですから、それなりに良く見えるのですが、これが10行、20行になってくると、もう少し高さを抑えてくれないかな~と思ってしまうのです。

このあたりは、HTMLでどうのこうのより、CSSを変更する方が良いと思います。

まずは、ダッシュボードから「外観」→「テーマの編集」でbase.cssを選択します。
賢威7のテーブルに関するところは以下あたりのコード。(大体427行あたり)

まず、行の高さを変えるには、次のコード部分を変更すれば変えられます。

padding」の1.25em 1em の部分ですが、最初の1.25emは文字に対する上下の値。次の1emは左右の値。
つまり、1.25の値を小さくすれば、行の高さを小さくできるわけです。

試しに 「padding」の上下の値を0.3emにして以下のようにコードを書き換えて見ました。

テーブルを表示してみると、ちゃんと行の高さが変更できています。

テーブルの高さや文字をCSSでカスタマイズする

ヘッダーの表示位置を変更する

ヘッダーの「項目名」の表示位置を変更する場合です。

デフォルトは、中心(center;)になっているのですが、それを左寄せにする場合、

「Text-align」のcenter; を left; に変更します。(右寄せなら right;)

テーブルの高さや文字をCSSでカスタマイズする

上のヘッダー「項目名」の位置が左寄せになったのがわかりますね。

もう一つ、今度は左のヘッダー「項目名が入ります」を右寄せにしてみます。

デフォルトでは「left;」の左寄せになっているのを「right;」の右寄せにしてみます。

テーブルの高さや文字をCSSでカスタマイズする

項目名が入ります」が右寄せになったのが確認できますね。

文字の色と大きさを変更する

文字の大きさとか、色なども変更できますが、表の項目内容によって、HTMLで変更した方が簡単ですね。

例えば、行ヘッダーの「項目名が入ります」を赤く、太字にする場合は、HTMLにスタイルを書き込みます。

HTMLサンプルコード

のところを

に変更すると・・・
テーブルの高さや文字をCSSでカスタマイズする

赤く太字になりました。

このように、CSSを変更しなくとも、HTMLに直接カスタマイズが出来ることもありますので、テーブルの項目内容などで、臨機応変に行っていく方が良いと思います。