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

【編集】　base.css

賢威7.1のテーブル

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

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

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

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

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

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

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

table{
	width: 100%;
	margin: 1em 0;
	padding: 0;
	border-top: 1px solid #cfcfcf;
	border-left: 1px solid #cfcfcf;
}
th,
td{
	padding: 1.25em 1em;
	border-right: 1px solid #cfcfcf;
	border-bottom: 1px solid #cfcfcf;
}
th{
	background-color: #e9e9e9;
	font-weight: bold;
	text-align: left;
}
thead th{
	background-color: #2e70a7;
	color: #fff;
	text-align: center;
}

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

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

th,
td{
	padding: 0.3em 1em;
	border-right: 1px solid #cfcfcf;
	border-bottom: 1px solid #cfcfcf;
}

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

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

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

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

thead th{
	background-color: #2e70a7;
	color: #fff;
	text-align: center;
}

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

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

text-align: left;

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

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

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

th{
	background-color: #e9e9e9;
	font-weight: bold;
	text-align: left;
}

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

text-align: right;

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

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

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

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

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

HTMLサンプルコード

<th>項目名が入ります</th>

のところを

<th><span class="red b">項目名が入ります</span></th>

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

赤く太字になりました。

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