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

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

何も指定しない状態

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

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

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

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

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

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

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

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

次のCSSを追加します。

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

 

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

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

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

 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;
 }

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