【html/CSS】tableの高さheightの指定方法【効かない原因と解決方法】

「tableに高さを指定したいけどどうやるの？」

「tableにheightを指定したのに効かないんだけど!?」

tableの高さの指定方法およびheightが効かない原因と解決方法を解説します。

tableの横幅や余白についてはこちら↓

【htmlだけ】tableにheight属性を指定

セル1-1	セル1-2	セル1-3	セル1-4
セル2-1	セル2-2	セル2-3	セル2-4

<table border="1" height="150">
    <tr>
        <td>セル1-1</td>
        <td>セル1-2</td>
        <td>セル1-3</td>
        <td>セル1-4</td>
    </tr>
    <tr>
        <td>セル2-1</td>
        <td>セル2-2</td>
        <td>セル2-3</td>
        <td>セル2-4</td>
    </tr>
</table>

tableにはheight属性があります。

これに数値を指定すると指定した高さになります。

単位は不要で「height="150"」と指定すると150pxになります。

ただしCSSでできることはCSSでやるよう推奨されているため、下記のCSSでの方法を覚えましょう。

【CSS】tableにheightを指定

セル1-1	セル1-2	セル1-3	セル1-4
セル2-1	セル2-2	セル2-3	セル2-4

<style>
.example{
    height: 150px;
}
</style>
<table border="1" class="example">
    <tr>
        <td>セル1-1</td>
        <td>セル1-2</td>
        <td>セル1-3</td>
        <td>セル1-4</td>
    </tr>
    <tr>
        <td>セル2-1</td>
        <td>セル2-2</td>
        <td>セル2-3</td>
        <td>セル2-4</td>
    </tr>
</table>

CSS「height」は要素の高さを指定するCSSです。

html属性と違い単位が必要です。

CSS heightについて詳しくはこちら↓

ちなみにtableのheightにはborderの太さが含まれます。

heightが効かないとき

元の高さより小さく指定している

tableは元の高さを最小サイズとし、これより小さくすることはできません。

tableの高さは各行の高さの合計です。

各行の高さはその行内の一番高いtdと同じになります。

tdはテキストなどの内容量+paddingの上下で高さが決まります。

小さくしたいならtd内の内容量やpaddingを減らしたり、行数を減らしましょう。

%指定している

%を指定するには親要素のheightがauto以外で指定されている必要があります。

なお、height未指定の場合、初期値である「height:auto」になります。

親にauto以外のheightを指定しましょう。

スクロールさせたいとき

「行数に関わらず任意の高さ内で収めたい！はみ出た分はスクロールさせたい！」

というときはtableを縦スクロールさせましょう。

tableのスクロール方法について詳しくはこちら↓

tdの高さを調整する

先述したようにtableの高さは各行のtdの高さの合計で決まります。

ということはtdの高さを調整するとtableの高さも指定できることになります。

tdの高さを調整するにはtd内にpadding、line-height、heightがポイントになります。

padding

paddingは線の内側の空間です。線とテキストを離したいときに指定します。

line-height

line-heightはテキストの行間の指定です。

{(指定した数値-1)÷2}×フォントサイズだけ上下に隙間ができます。

具体例を挙げると、2を指定すると0.5文字分上下に隙間ができます。

height

tdのheightはpaddingが除かれます。

またline-heightより、テキストなどの内容量より、小さくすることはできません。

(heightと内容量のうち高いほう)+paddingの上下がtdの高さになります。

親の高さと同じ高さにする

親のheightがauto以外のとき

tableにheight:100%を指定しましょう。

<style>
.example3{
    height: 200px;
    border: 1px solid #999;
    background: #f2f2f2;
}
.example3 table{
    /*コレ*/height: 100%;
}
</style>
    
<div class="example3">
    <table border="1">
        <tr>
            <td>セル1-1</td>
            <td>セル1-2</td>
            <td>セル1-3</td>
            <td>セル1-4</td>
        </tr>
        <tr>
            <td>セル2-1</td>
            <td>セル2-2</td>
            <td>セル2-3</td>
            <td>セル2-4</td>
        </tr>
    </table>
</div>

親にauto以外のheightが指定されているときはheightの%指定が効きます。

「height:100%」を指定すると親要素と同じ高さになります。

親のheightがautoのとき

親にdisplay:flexを指定しましょう。

<style>
.example4{
    display: flex;
}
.example4-1{
    /*コレ*/display: flex;
    border: 1px solid #999;
    background: #f2f2f2;
}
.example4-2{
    width: 100px;
    height: 200px;
    border: 1px solid #999;
    background: #f2f2f2;
}
</style>
    
<div class="example4">
    <div class="example4-1">
        <table border="1">
            <tr>
                <td>セル1-1</td>
                <td>セル1-2</td>
                <td>セル1-3</td>
                <td>セル1-4</td>
            </tr>
            <tr>
                <td>セル2-1</td>
                <td>セル2-2</td>
                <td>セル2-3</td>
                <td>セル2-4</td>
            </tr>
        </table>
    </div>
    <div class="example4-2"></div>
</div>

親にheightが指定されていないときはheightは初期値であるautoであり、子要素はheightを%指定できません。

このようなときは親要素に「display:flex」を指定しましょう。

この子要素は親と同じ高さになります。

高さを可変にする

tableの高さは基本的にはauto（未指定）がいいでしょう。

ブラウザ幅が狭くなりtableの幅が狭くなったとき、内容量の改行が多くなり高さが高くなります。

高さを指定していても、table本来の高さが指定したheightより大きくなるとheightは無視されます。

上記を踏まえた上で説明します。

高さをブラウザの幅や高さに応じて可変させたいときはvwやvhを指定しましょう。

vwやvhは%やpxのような長さの単位です。

100vwはブラウザの横幅です。1vwはその1/100です。widthのvwと覚えましょう。

100vhはブラウザの縦幅です。1vhはその1/100です。heightのvhと覚えましょう。

セル1-1	セル1-2	セル1-3	セル1-4
セル2-1	セル2-2	セル2-3	セル2-4

<style>
.example5{
    height: 20vh;
}
</style>
<table border="1" class="example5">
    <tr>
        <td>セル1-1</td>
        <td>セル1-2</td>
        <td>セル1-3</td>
        <td>セル1-4</td>
    </tr>
    <tr>
        <td>セル2-1</td>
        <td>セル2-2</td>
        <td>セル2-3</td>
        <td>セル2-4</td>
    </tr>
</table>

【まとめ】tableの高さの指定方法

【htmlだけ】tableにheight属性を指定

【CSS】tableにheightを指定

heightが効かないとき

• heightは元の高さより小さくできない
• 親のheightがautoのとき%指定はできない

tdの高さを調整する

tableの高さは各行のtdの高さの合計であり、tdの高さは(heightと内容量のうち高いほう)+paddingの上下となる

親の高さと同じ高さにする

親のheightがauto以外のとき、tableにheight:100%を指定。

親のheightがautoのとき、親にdisplay:flexを指定。

高さを可変にする

基本はauto。vwやvhを指定。

以上、tableの高さの指定方法【効かない原因と解決方法】でした。