htmlの表の幅を調整したい

やりたいこと

幅を指定しない状態だと見づらいものになりました。いい感じに調整したいです。

aaa	bbb	ccc
ddd	eee

画面の端から端まで表示

thのパラメータ設定をこちらのページ[1]を参考に実装しました。

table.fixWidth{
    width: 100%;
    table-layout: fixed;
}
th.width20{
    width: 20%;
}
th.width40{
    width: 40%;
}

<table class="fixWidth">
    <tr>
        <th class="width20">20%</th>
        <th class="width40">40%</th>
        <th class="width40">40%</th>
    </tr>
    <tr>
        <td>20%</td>
        <td>40%</td>
        <td>40%</td>
    </tr>
</table>

styleはcssで定義しました。なのでstyleタグは省いてます。

20%	40%	40%
20%	40%

というわけでやりたいことができました。ズームしても画面幅いっぱいに表示されます。

画像はズームしたい

画像を入れている状態で画面を拡大したときは、画像も拡大したいので別の方法も探します。

横幅を指定して、スクロールするようにすればよさそうです[2]。

ついでに中央ぞろえにしました[3]

div.scrollx {
    overflow-x: scroll;
    align-items: center;
}

table.img {
    width: 600px;
    table-layout: fixed;
    margin-left: auto;
    margin-right: auto;
}

<div class="scrollX">
    <table class="img">
        ~省略~
    </table>
</div>

ということで、作った表は以下の通りです

20%	40%	40%
20%	40%

他にやりたいこと

スクロールが発生した時は表を真ん中に置くようにしたいですね、作れたら更新します。

ではまた。

参考

『CSS: table（テーブル）の列幅の割合を指定する』 2024/12/09
https://step-learn.com/article/html-css/031-table-width-percent.html
『【HTML/CSS】横スクロールできる表（テーブル）の作り方』 2024/12/09
https://tomiwa-tech.co.jp/blog/scrollable-table/
『html･CSSで表テーブル(table)を中央寄せ(center)にする方法』 2024/12/09
https://csshtml.work/table-center/#CSSmarginauto

作成日	2024/09/12
最終更新日	2025/06/06