最終更新日: 2021年3月5日
Bootstrapでテーブルのtdやthの横幅を固定にする方法！
Bootstrapでテーブルのtdやthの横幅を固定にする方法解説します。Bootstrapでテーブルのtdやthの横幅を固定するにはthにwidthを設定すると、簡単にBootstrapでテーブルのtdやthの横幅を固定する事ができます。
Bootstrapでテーブルのtdやthの横幅を固定したい！
Bootstrapでテーブルを作成している際にtd(Table Data)要素やth(Table Header)要素の横幅を固定したい場合があると思います。
今回はBootstrapでtable要素のtd要素やth要素の横幅を固定にする方法をサンプルコード付きで解説します。
Bootstrapでテーブルのtdやthの横幅を固定にする方法
Bootstrap3
Bootstrap3では下記のサンプルコードのようにクラスにcolを設定するだけでtableのtdやthの横幅を固定する事が出来ましたが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>Bootstrap4
Bootstrap4でのスタイルで横幅を指定する方法を紹介していきます。
下記のサンプルコードのようにth要素にwidthを設定すると、簡単にBootstrapでテーブルのtd要素やth要素の横幅を固定する事ができます。
td要素は自動で改行されるので、td要素の幅を調節したい場合はth要素のwidthを変更する事で幅を調整する事ができます。
