ホームへ

【html/CSS】tableの幅や高さを自動調整する方法

2022年03月30日

「tableの幅を自動調整したい!」

「tableの幅を自動調整しないでほしい!」

tableの幅を自動調整する方法としない方法を解説します。

【html】widthとheightを指定しない

tableタグではwidth属性とheight属性で幅と高さを指定できます。

左下は指定した例です。

このwidth属性とheight属性をなくすことで自動調整にできます。(右下)

任意指定(自動調整しない)

セル セル
セル セル
<table width="200" height="200" border="1">
    <tr>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <td>セル</td>
        <td>セル</td>
    </tr>
</table>

自動調整

セル セル
セル セル
<table border="1">
    <tr>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <td>セル</td>
        <td>セル</td>
    </tr>
</table>

なお、tableにheightを指定するのはオススメしません。

行が増えたり、tdの大きさが変わることで変化するためです。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

【CSS】width:auto

CSSでtableの幅を自動調整するには「width:auto」を指定します。

なお「width:auto」は初期値であるため、指定しなくても自動調整状態になっています。

widthを上書きしたいときに「width:auto」を指定するといいでしょう。

セルセルセル1セル2
セル3セルセル4
<style>
.example{
    width: auto;
}
</style>
<table class="example" border="1">
    <tr>
        <td>セルセルセル1</td><td>セル2</td>
    </tr>
    <tr>
        <td>セル3</td><td>セルセル4</td>
    </tr>
</table>

高さも「height:auto」で自動調整できますが、height自体指定することはほぼないため出番はあまりないでしょう。

【自動調整しない】width:○px

tableの幅を自動調整しない、つまり固定するには「width:○px」を指定します。

○には任意の数値が入ります。

px指定すると内容量に関わらず横幅が固定されます。

セルセルセル1セル2
セル3セルセル4
<style>
.example2{
    width: 200px;
}
</style>
<table class="example2" border="1">
    <tr>
        <td>セルセルセル1</td><td>セル2</td>
    </tr>
    <tr>
        <td>セル3</td><td>セルセル4</td>
    </tr>
</table>

固定ではありませんが、%で指定することもできます。

%指定すると親の幅に応じた幅になります。レスポンシブ対応では必須の単位です。

セルセルセル1セル2
セル3セルセル4
<style>
.example3{
    width: 50%;
}
</style>
<table class="example3" border="1">
    <tr>
        <td>セルセルセル1</td><td>セル2</td>
    </tr>
    <tr>
        <td>セル3</td><td>セルセル4</td>
    </tr>
</table>

まとめ

tableの幅を自動調整するには「width:auto」を指定。

tableの幅を自動調整しない、つまり固定するには「width:○px」を指定。

%指定すると親の幅に応じた幅になる。

以上、tableの幅を自動調整する方法としない方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ