テーブルのカラム幅をCSSで自由自在に調整！widthとtable-layoutの使いこなし術

カラム幅を調整する方法（width・table-layout）

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

生徒

「ホームページで表を作ったのですが、文字の量に合わせて列の幅が勝手に変わってしまいます。決まった幅に固定したり、細かく調整したりすることはできますか？」

先生

「はい、CSSのwidthとtable-layoutを使えば、カラム幅を思い通りに制御することができますよ。」

生徒

「カラム幅とは何ですか？また、どのように設定すればいいのか教えてください！」

先生

「カラムとは、表の『列』のことです。それでは、プログラミング初心者でもすぐに理解できるカラム幅の調整テクニックを見ていきましょう！」

1. カラム幅調整の重要性

Webサイトで表を表示するとき、情報が見やすいかどうかはレイアウトの美しさに左右されます。特に、情報の重要度に合わせて列の幅を調整することは、ユーザーに情報を伝える上で非常に重要です。カラム（列）の幅をコントロールできれば、重要なデータは大きく、あまり重要でないデータは小さく表示するといった、メリハリのあるデザインが可能になります。これだけで、Webサイトの印象はグッとプロっぽくなります。

2. widthを使って列の幅を固定する方法

width（ウィズ）は、要素の「横幅」を指定するためのCSSの命令です。表のセルであるthやtdに対してwidthを設定することで、その列の幅をピクセル単位やパーセント単位で固定できます。例えば、商品名を表示する列は広く、数量を表示する列は狭くするといった使い分けが簡単に行えます。


<style>
    .custom-table {
        width: 100%;
    }
    .col-name {
        width: 70%;
    }
    .col-price {
        width: 30%;
    }
</style>

<table class="table table-bordered custom-table">
    <tr>
        <th class="col-name">商品名</th>
        <th class="col-price">価格</th>
    </tr>
    <tr>
        <td>高性能なパソコン</td>
        <td>150,000円</td>
    </tr>
</table>

ブラウザ表示

3. table-layoutプロパティで表示を安定させる

通常、テーブルは中身のテキスト量に応じて列幅が自動調整されますが、これだと文字の量が変わった時にレイアウトが崩れてしまいます。そこで登場するのが「table-layout: fixed;」という命令です。これをテーブルタグに適用すると、最初の列の幅を基準にして固定され、内容の変化に左右されない安定したレイアウトが作れます。


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

<table class="table table-bordered fixed-table">
    <tr>
        <th style="width: 20%;">ID</th>
        <th style="width: 80%;">名前</th>
    </tr>
    <tr>
        <td>1</td>
        <td>山田 太郎</td>
    </tr>
</table>

ブラウザ表示

4. パーセント指定でレスポンシブに対応する

スマホやパソコンなど、画面の大きさが変わるデバイスに対応させるためには、幅を「px（ピクセル）」のような固定値ではなく「%（パーセント）」で指定するのがコツです。画面全体に対する割合を指定しておけば、画面が小さくなっても自動的に幅が縮まり、レイアウト崩れを防ぐことができます。


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

<table class="table table-bordered responsive-table">
    <tr>
        <th style="width: 25%;">カテゴリ</th>
        <th style="width: 50%;">内容</th>
        <th style="width: 25%;">更新日</th>
    </tr>
    <tr>
        <td>CSS</td>
        <td>カラム幅の調整について</td>
        <td>2026/06/19</td>
    </tr>
</table>

ブラウザ表示

5. 長い文字がはみ出ないようにする工夫

table-layout: fixedを設定すると、セルからはみ出るほど長い文字が入った時に、レイアウトが崩れてしまうことがあります。そんな時は、「word-wrap: break-word;」という設定を一緒に使うことで、長い文字を自動的に折り返して、セルの中に収めてくれるようになります。これでどんなに長い名前でも表の形を維持できます。


<style>
    .text-wrap-table td {
        word-wrap: break-word;
    }
</style>

<table class="table table-bordered text-wrap-table" style="table-layout: fixed; width: 100%;">
    <tr>
        <td style="width: 50%;">非常に長い名前が入ったとしても、ちゃんと折り返して表示されますよ</td>
        <td style="width: 50%;">ここは通常のデータです</td>
    </tr>
</table>

ブラウザ表示

6. なぜSEOの観点からカラム幅が重要なのか

検索エンジンは、ユーザーにとって「見やすく、使いやすいサイト」を高く評価します。テーブル内のデータがバラバラに配置されていたり、文字が枠からはみ出していたりすると、ユーザーはすぐにページを離れてしまいます。適切なカラム幅でデータを整列させることは、読みやすさを向上させ、結果としてユーザーの滞在時間を延ばすことにつながります。これがGoogleなどの検索エンジンによる評価アップに直結するのです。

7. 初心者が陥りやすいミスとその対策

CSSで幅を指定する際、合計の幅が100%を超えてしまったり、逆に足りなかったりして表示が不安定になることがあります。まずは一番大きい外側のテーブルタグに「width: 100%」を指定し、その中のthタグでそれぞれの比率を決めていくという「大きいところから順に決める」というルールを守るだけで、ほとんどの崩れは解決できます。一つずつ確認しながら進めていきましょう。

8. ユーザー体験を向上させるデザインの極意

Webサイト制作において、最も大切なのは「見てくれる人の気持ち」です。テーブルはデータを一覧で見せるための最強のツールですが、それが使いにくいと情報が伝わりません。カラム幅の調整は、一見地味な作業に見えますが、この細かな配慮こそがユーザーからの信頼を生みます。今日学んだCSSの知識をフル活用して、誰が見ても分かりやすい、最高に親切なWebサイトを作っていってください。

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