Bootstrapでテーブルの幅を可変・固定に調整する方法を解説！
Bootstrapで.table-responsiveを使用すると、表が画面幅を超えたときに水平スクロールするようにできますが、更にtableの幅を調整したい場合はどうしたらよいでしょうか？この記事では、Bootstrapで表の幅を調整する方法を紹介します！
Bootstrapでテーブルの幅を思い通りに調整したい
.table-responsiveを使用すると、テーブルが画面幅を超えたときに水平スクロールするようにできますが、更にテーブルの幅を可変・固定に調整したい場合はどうしたらよいでしょうか？そのような場合のやり方を紹介します。
※今回はレスポンシブのデザインを紹介しているので、プレビューでうまく表示されないときがあります。そのようなときは、プレビュー右上のボタンで全画面表示にして見てみるとわかりやすいです！
Bootstrapでテーブルの幅を調整する方法
Bootstrap3を使うやり方
bootstrap3では、表の列ごとにグリッドシステムを利用してレスポンシブに幅を指定することができます。
幅を指定した表
<tr>
<td class="col-xs-3 col-ms-3 col-md-2 col-lg-2 bg-info">項目1samplesample</td>
<td class="col-xs-3 col-ms-3 col-md-4 col-lg-4 bg-danger">項目2samplesample</td>
<td class="col-xs-3 col-ms-3 col-md-2 col-lg-2 bg-warning">項目3samplesample</td>
<td class="col-xs-3 col-ms-3 col-md-4 col-lg-4 bg-success">項目4samplesample</td>
</tr>このように指定すると、画面幅によって列の幅が自動調整されます。
画面幅を狭くすると均等な幅になり、広くすると広い列と狭い列に分かれます。
また、表示できる幅を超えた場合は横スクロールになります。
Bootstrap4以降のやり方
上記のやり方はBootstrap4以降ではできないようです。
試しに同じように記述してみると以下のようになります。
画面幅を広くすると指定した幅になっているように思えますが、画面幅を狭くするとうまくできていない感じがしますね。
Bootstrap4以降では、widthを直接CSSで指定することで同様のスタイルを適用させることができます。
レスポンシブなCSS
@media screen and (max-width:480px){
td{
width: 25%;
}
}
@media screen and (min-width:781px){
.td-min{
width: 15%;
}
.td-max{
width: 35%;
}
}CSSでレスポンシブを指定することで幅が自動調整されます。
CSSファイルを使用しないといけないので少し面倒ですが、widthを自分で指定することで同様のスタイルを実現できますね。
今回は列の個数が4つなので、画面幅が広いときは25%ずつにすることで均等な幅を表現できます。
スクロールさせずに幅を固定にしたい
ちなみに、レスポンシブにせず、表の幅を固定したい場合は.table-responsiveを使用しないことで実現できます。
あまり使うことはないかと思いますが紹介しておきます。
ぱっと見、レスポンシブになっているように見えますが、よく見るとスクロールバーが表示されていませんね。
画面からはみ出る場合は横スクロールにならず、そのまま画面幅からはみ出て表示されているということです。
検証ツールで見てみるとわかりやすいです。
