WPの賢威７で、テーブルの幅や高さを変える方法

賢威７のWordPress版で、テーブル表示の時に、何も指定しないと表の中の空間が凄く広くなってしまいます。

表の幅、セルの高さ、文字サイズの変更の方法をメモしておきます。

何も指定しない状態

初期設定のままでは、この様な感じです。

	Ａ	Ｂ
ａ	１	２
ｂ	３	４

沢山詰め込もうとすると、改行されてしまいますし、縦に長くなった表になってしまいます。

テーブルの高さを狭く指定

表の高さを少し狭く設定してみます。

	Ａ	Ｂ
ａ	１	２
ｂ	３	４

この変更は、ＣＳＳで行います。

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

テーブルの幅を狭く指定する

では、幅も変えてみましょう。

次のＣＳＳを追加します。

　table{
	width: 80%;
	margin: 1em 0;
	padding: 0;
	border-top: 1px solid #cfcfcf;
	border-left: 1px solid #cfcfcf;
}

 

	Ａ	Ｂ
ａ	１	２
ｂ	３	４

左よりが気になりますね～。
次は、センター合わせをしてみましょう！

テーブル全体のセンター合わせ

margin-left: auto;
margin-right: auto;
の２行を追加して、ＣＳＳは次の様になります。

　table{
	width: 80%;
	margin: 1em 0;
	padding: 0;
	border-top: 1px solid #cfcfcf;
	border-left: 1px solid #cfcfcf;
	margin-left: auto;
 	margin-right: auto;
}

 

	Ａ	Ｂ
ａ	１	２
ｂ	３	４

文字サイズを全体に小さくしてみる

さらに、文字サイズも変えてみましょう！

font-size: 10px 等と、入れてみます。

　th,
　td{
	font-size: 10px;
	padding: 5px 10px;
	border-right: 1px solid #cfcfcf;
	border-bottom: 1px solid #cfcfcf;
 }

すると、この様な感じになります。

	Ａ	Ｂ
ａ	１	２
ｂ	３	４