高さの指定

表全体の高さ

行の幅は padding で用が足りる事が多いでしょうが指定することもできます。ただし、mozilla 系のブラウザではスタイルシートにあらかじめ html {height:100%;}と、body {height:100%;} をいれないと高さの%指定はうまくいきません。高さの場合は%で指定する要求はそれほどないと思います。empxを使いたくなるのではないでしょうか。

動物 鳴き声 好物
いぬ わんわん ほね
ねこ にゃー こたつ
うま ひひーん にんじん
table{
   height: 400px;
   width:50%;
}

行の高さ

表の高さよりも行の高さを指定したいことが多いでしょう。内容が少ない行についても高さを揃えたいということはあるかもしれません。この場合は文字の大きさに合わせるのでemが最適です。

%指定する場合は表の高さが指定されていないと無効ですが、emならば大丈夫です。

動物 鳴き声 好物
いぬ わんわん ほね
ねこ にゃー こたつ
うま ひひーん にんじん

tdに指定してもいいのですが、trに指定する方が自然です。

tr {
   height: 3em;
}
動物 鳴き声 好物
いぬ わんわん ほね
ねこ にゃー こたつ
うま ひひーん にんじん

tdに指定してもいいのですが、trに指定する方が自然です。

tr {
   height: 3em;
}
tr.koumoku {
   height: 1em;
}
<table>
<tr class="koumoku">
<td>動物</td>
<td>鳴き声</td>
<td>好物</td>
</tr>
<tr>
<td>いぬ</td>
<td>わんわん</td>
<td>ほね</td>
</tr>
................................

聖愛中学高等学校
http://www.seiai.ed.jp/
Last Modified