Bootstrapでテーブル列幅を最適化！w-25・text-truncate・nowrapの使い方ガイド

1. w-25で列幅を固定する方法

1. w-25で列幅を固定する方法

Bootstrapの幅指定ユーティリティ「w-25」を使うと、列の幅を親要素の25％に固定できます。これにより、テーブルの列幅がバラバラにならず、レイアウトが整いやすくなります。

<table class="table table-bordered">
    <thead>
        <tr>
            <th class="w-25">名前</th>
            <th>住所</th>
            <th>電話番号</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>山田太郎</td>
            <td>東京都新宿区西新宿1-1-1</td>
            <td>03-1234-5678</td>
        </tr>
    </tbody>
</table>

2. text-truncateで文字を省略して表示する

2. text-truncateで文字を省略して表示する

長い文字列はテーブルの見た目を崩すことがあります。Bootstrapの「text-truncate」を使うと、はみ出した文字を「…」で省略表示できます。

<table class="table table-bordered">
    <thead>
        <tr>
            <th class="w-25 text-truncate">商品名</th>
            <th>説明</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-truncate">超長い商品名がここに入ります</td>
            <td>詳細な説明テキスト</td>
        </tr>
    </tbody>
</table>

3. nowrapで改行せず1行にまとめる

3. nowrapで改行せず1行にまとめる

「nowrap」はテキストを改行せずに1行で表示させるクラスです。テーブル列の幅を揃える時に役立ちます。text-truncateと一緒に使うとより効果的です。

<table class="table table-bordered">
    <thead>
        <tr>
            <th class="w-25 text-truncate text-nowrap">説明</th>
            <th>備考</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-truncate text-nowrap">非常に長いテキストが改行されず1行で表示されます</td>
            <td>その他の情報</td>
        </tr>
    </tbody>
</table>

4. w-25・text-truncate・nowrapの組み合わせ例

4. w-25・text-truncate・nowrapの組み合わせ例

これらのクラスを組み合わせると、列幅を25％に固定しつつ、長いテキストを省略表示し、改行されないようにできます。テーブル全体の見た目がスッキリ整います。

<table class="table table-striped">
    <thead>
        <tr>
            <th class="w-25 text-truncate text-nowrap">商品名</th>
            <th class="w-25 text-truncate text-nowrap">説明</th>
            <th>価格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-truncate text-nowrap">超長い商品名の例</td>
            <td class="text-truncate text-nowrap">詳細な商品説明が長すぎる場合</td>
            <td>1000円</td>
        </tr>
    </tbody>
</table>

5. モバイル画面での列幅調整

5. モバイル画面での列幅調整

Bootstrapはレスポンシブ対応なので、画面サイズによって列幅を変えたい場合は、w-25をw-sm-25やw-md-25に変更できます。これによりスマホやタブレットでもテーブルが崩れにくくなります。

<table class="table table-bordered">
    <thead>
        <tr>
            <th class="w-100 w-md-25 text-truncate text-nowrap">名前</th>
            <th class="w-100 w-md-75">住所</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-truncate text-nowrap">山田太郎</td>
            <td>東京都千代田区丸の内1-1-1</td>
        </tr>
    </tbody>
</table>

6. 実務での活用ポイント

6. 実務での活用ポイント

テーブル列幅の調整は、商品リストや顧客情報、受注管理など様々なWebアプリで役立ちます。w-25・text-truncate・nowrapを適切に組み合わせることで、情報量が多くても見やすいテーブルを作成できます。

<table class="table table-hover">
    <thead>
        <tr>
            <th class="w-25 text-truncate text-nowrap">社員名</th>
            <th class="w-25 text-truncate text-nowrap">役職</th>
            <th class="w-50">部署</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-truncate text-nowrap">佐藤次郎</td>
            <td class="text-truncate text-nowrap">マネージャー</td>
            <td>営業部 東京支社</td>
        </tr>
    </tbody>
</table>

7. テーブル列幅調整のまとめ方

7. テーブル列幅調整のまとめ方

w-25で列幅を固定し、text-truncateで文字を省略し、nowrapで改行を防ぐ。この3つを組み合わせるだけで、テーブルの可読性とデザイン性が大幅に向上します。特に情報量が多い場合や管理画面で非常に便利です。

<table class="table table-bordered">
    <thead>
        <tr>
            <th class="w-25 text-truncate text-nowrap">項目名</th>
            <th class="w-25 text-truncate text-nowrap">詳細</th>
            <th class="w-50">備考</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-truncate text-nowrap">サンプルデータ1</td>
            <td class="text-truncate text-nowrap">長い説明文が入りますが省略されます</td>
            <td>追加情報</td>
        </tr>
    </tbody>
</table>

まとめ

まとめ

今回はBootstrapのテーブル列幅調整について、w-25、text-truncate、nowrapの使い方を詳しく解説しました。w-25は列幅を親要素の25％に固定することで、テーブルのレイアウトを安定させ、見た目を整える役割があります。text-truncateを使うことで、長すぎるテキストを省略表示でき、テーブル全体の可読性を高めます。nowrapはテキストを改行させずに1行で表示するため、列幅を均一に保つのに非常に役立ちます。これらを組み合わせることで、商品リスト、社員情報、受注管理などのWebアプリケーションで、情報量が多くても見やすく整理されたテーブルを作成可能です。また、レスポンシブ対応としてw-sm-25やw-md-25などを使えば、スマホやタブレット画面でも列幅が適切に調整され、ユーザー体験が向上します。

さらに、実務では、顧客データや商品情報の管理画面など、テーブルの列幅や表示内容が乱れることで作業効率が下がる場面があります。Bootstrapのクラスを活用することで、列幅の調整や文字の省略表示を簡単に実装でき、開発工数を減らしつつ、見やすく整ったUIを提供できます。特に情報量が多い管理画面や商品一覧ページでは、w-25・text-truncate・nowrapの組み合わせが不可欠と言えるでしょう。

ここでまとめのサンプルコードとして、列幅25％固定、テキスト省略、改行なしの3つを組み合わせた実用例を示します。これにより、長いテキストが多くてもテーブルが崩れず、スッキリとした見た目になります。

<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th class="w-25 text-truncate text-nowrap">社員名</th>
            <th class="w-25 text-truncate text-nowrap">役職</th>
            <th class="w-50">部署</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-truncate text-nowrap">佐藤次郎</td>
            <td class="text-truncate text-nowrap">マネージャー</td>
            <td>営業部 東京支社</td>
        </tr>
        <tr>
            <td class="text-truncate text-nowrap">鈴木花子</td>
            <td class="text-truncate text-nowrap">リーダー</td>
            <td>開発部 大阪支社</td>
        </tr>
    </tbody>
</table>