Bootstrapでテーブルのtdやthの横幅を固定にする方法!

Bootstrapでテーブルのtdやthの横幅を固定にする方法解説します。Bootstrapでテーブルのtdやthの横幅を固定するにはthにwidthを設定すると、簡単にBootstrapでテーブルのtdやthの横幅を固定する事ができます。

コンテンツ [表示]

  1. 1Bootstrapでテーブルのtdやthの横幅を固定したい!
  2. 2Bootstrapでテーブルのtdやthの横幅を固定にする方法
  3. 2.1Bootstrap3
  4. 2.2Bootstrap4

Bootstrapでテーブルのtdやthの横幅を固定したい!

Bootstrapでテーブルを作成している際にtd(Table Data)要素やth(Table Header)要素の横幅を固定したい場合があると思います。

今回はBootstrapでtable要素のtd要素やth要素の横幅を固定にする方法をサンプルコード付きで解説します。

Bootstrapでテーブルのtdやthの横幅を固定にする方法

Bootstrap3

Bootstrap3では下記のサンプルコードのようにクラスにcolを設定するだけでtabletdthの横幅を固定する事が出来ましたがBootstrap4では出来なくなってしまいました

bootstrap4ではcolの設定ではなく、スタイルで横幅を指定する必要があるので次章で紹介していきます。

Bootstrap3

<table class="table">
  <colgroup>
      <col class="col-md-4">
      <col class="col-md-7">
  </colgroup>
  <tbody>
  <tr>
      <td>sample Title</td>
      <td>sample Title</td>
  </tr>
  </tbody>
</table>
<colgroup>
HTMLのcolgroupタグはテーブル(表)の列のグループを指定するタグです。colgroupタグの使い方をサンプルコード付きで解説します。
<col>
HTMLのcolタグはテーブル(表)の縦列の属性をまとめて設定するためめのタグです。通常colgroupタグ内に配置されるタグです。colタグの使い方をサンプルコード付きで解説します。

Bootstrap4

Bootstrap4でのスタイルで横幅を指定する方法を紹介していきます。

下記のサンプルコードのようにth要素widthを設定すると、簡単にBootstrapでテーブルのtd要素やth要素の横幅を固定する事ができます。

td要素は自動で改行されるので、td要素の幅を調節したい場合はth要素のwidthを変更する事で幅を調整する事ができます。

今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

shu
ライター

shu

主にHTML & CSS、Bootstrap の記事を執筆します。皆さんがわかりやすく、記憶に残る情報を発信していきます。