CSSでテーブルのサイズをレスポンシブに調整する方法！初心者でもスマホ対応できる柔軟な表の作り方

テーブル全体のサイズをレスポンシブに調整する方法

先生と生徒の会話形式で理解しよう

生徒

「Webサイトに表を作ったのですが、スマホで見ると画面からはみ出してしまいます。どうすればきれいに収まりますか？」

先生

「それはレスポンシブ対応ができていないからですね。CSSを使ってテーブルのサイズを自動調整する方法を覚えれば、スマホでもパソコンでも見やすい表が作れますよ。」

生徒

「レスポンシブというのはどういう意味ですか？初心者にも分かりやすく教えてください。」

先生

「レスポンシブとは、画面の大きさに応じてレイアウトを自動的に変化させる仕組みのことです。一緒に調整のコツを見ていきましょう！」

1. レスポンシブデザインの基礎知識

レスポンシブデザインとは、一枚のWebページをパソコンの大きな画面から、スマホの小さな画面まで、どんな端末で見ても見やすく表示させる技術のことです。テーブル（表）は、データ量が多いとどうしても横幅が広くなりがちです。これを「はみ出させずに、画面の幅に合わせて縮める」あるいは「はみ出た部分だけスクロールできるようにする」のが、今回の目的です。HTMLとCSSを工夫するだけで、誰でも簡単に美しい表を作ることができます。

2. 表の幅をパーセントで指定する基本テクニック

最も簡単な方法は、CSSでテーブルの横幅を「100%」と指定することです。これにより、表が常に画面の幅いっぱいに広がるようになります。固定した数値ではなく、パーセントを使うのがポイントです。


<style>
    .responsive-table {
        width: 100%;
        max-width: 600px;
    }
</style>

<table class="responsive-table border">
    <tr>
        <th>商品名</th>
        <th>価格</th>
    </tr>
    <tr>
        <td>サンプル商品</td>
        <td>1000円</td>
    </tr>
</table>

ブラウザ表示

3. 枠からはみ出た部分をスクロールさせる

どうしても横幅が広い表の場合、無理に縮めると文字が読みにくくなります。そんな時は、表を専用の箱（divタグなど）で囲い、その箱だけが横にスクロールするように設定します。これがモバイルフレンドリーな設計の定番です。


<style>
    .table-container {
        overflow-x: auto;
    }
    table {
        width: 100%;
        min-width: 500px;
    }
</style>

<div class="table-container">
    <table class="border">
        <tr>
            <th>1列目</th>
            <th>2列目</th>
            <th>3列目</th>
        </tr>
        <tr>
            <td>データ</td>
            <td>データ</td>
            <td>データ</td>
        </tr>
    </table>
</div>

ブラウザ表示

4. セルの幅を均等にする考え方

表の列によって幅がバラバラだと見栄えが悪くなります。CSSのtable-layout: fixedを使うと、列の幅を均等に保ちつつ、レスポンシブに制御しやすくなります。これにより、どの端末で見ても列の崩れが起きにくくなります。


<style>
    .fixed-table {
        table-layout: fixed;
        width: 100%;
    }
</style>

<table class="fixed-table border">
    <tr>
        <td>均等な幅</td>
        <td>均等な幅</td>
    </tr>
</table>

ブラウザ表示

5. スマホで見やすくするpaddingの調整

スマホでは指で操作するため、セルの余白（パディング）が狭すぎるとタップしづらいことがあります。CSSのメディアクエリ（画面幅に応じた設定）を使い、スマホの時だけ余白を広くするといった調整が、操作性を向上させます。


<style>
    td {
        padding: 8px;
    }
    @media (max-width: 600px) {
        td {
            padding: 16px;
        }
    }
</style>

<table class="border">
    <tr>
        <td>タップしやすい大きさ</td>
    </tr>
</table>

ブラウザ表示

6. なぜレスポンシブ対応が重要なのか

今のWeb閲覧の多くはスマートフォンから行われています。もしパソコン専用の表がスマホで小さく表示されてしまい、文字が読めなければ、ユーザーはそのサイトをすぐに閉じてしまいます。SEOの観点からも、Googleはスマホで見やすいサイトを高く評価する傾向があります。レスポンシブ対応は、単なるデザインの問題ではなく、集客や売り上げを左右するほど重要な要素なのです。

7. 読み込み速度への配慮

過剰に複雑なCSSやJavaScriptを使ってレスポンシブ対応を行うと、サイトが重くなる原因になります。まずはシンプルなCSSのwidth設定から始めて、徐々に最適化していくのが良いでしょう。特に画像や重い表データを含む場合は、ユーザーが待ち時間を感じないよう注意が必要です。

8. ユーザー視点に立ったデザインを心がける

最終的に大事なのは、ユーザーにとって「読みやすいかどうか」です。数値がずれていたり、列が隠れていたりする表は、ユーザーに誤解を与える可能性があります。レスポンシブな設計を行う際は、必ず自分自身のスマホでも表示を確認し、実際に触ってみて「使いやすいか」をチェックする癖をつけましょう。小さな配慮が、信頼されるサイトへとつながっていきます。

2026年最新スキルアップ・実践セミナー