【html/CSS】tableを画面いっぱいに広げる方法

「tableをブラウザの画面いっぱいにしたい！」

tableを画面いっぱいに広げる方法を解説します。

【結論】width:100vw; height:100vh

tableに「width:100vw」「height:100vh」を指定すると画面いっぱいになります。

<style>
body{
    margin: 0;
}
table{
    width: 100vw;
    height: 100vh;
}
</style>
<table border="1">
    <tr>
        <th></th>
        <th>ヘッダー</th>
        <th>ヘッダー</th>
    </tr>
    <tr>
        <th>ヘッダー</th>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <th>ヘッダー</th>
        <td>セル</td>
        <td>セル</td>
    </tr>
</table>

vwはブラウザの横幅を、vhはブラウザの高さを基準とした単位です。

それぞれ値を100にするとMAX、ブラウザと同じ大きさになります。

bodyにはブラウザがデフォルトでmarginの値をつけているため、「body{margin:0;}」を指定して余計な余白を消してしまいましょう。

「横だけ画面いっぱいにしたい」場合は「width:100vw」だけ、
「縦だけ画面いっぱいにしたい」場合は「width:100vh」だけ指定しましょう。

画面いっぱいに広げる方法

ここでは単純にtableを広げましたが、目的によってはうまくいかないかもしれません。

そのときは下記を参考に調整してみてください。

tableのwidthとheight

また、tableはwidthやheightにクセがあるため、下記も参考にしてください。