1. ホーム
  2. twitter-bootstrap

[解決済み] Twitter Bootstrapのテーブルの幅が常に100%なのはなぜですか?

2022-04-27 08:18:04

質問

このようなマークアップがあるとします。

<table class="table table-bordered" align="center"> 

セルがいくつあっても、テーブルの幅は常に100%です。なぜでしょう?

どうすればいいですか?

ブートストラップ内のすべてのテーブルは、そのコンテナに応じて伸縮します。 .span* グリッド要素から選択します。このプロパティを削除したい場合は、独自のテーブル・クラスを作成し、それをコンテンツと共に展開したいテーブルに追加するだけです。

.table-nonfluid {
   width: auto !important;
}

このクラスを自分のスタイルシートの中に追加し、テーブルのコンテナにこのように追加するだけでいいのです。

<table class="table table-nonfluid"> ... </table>

この方法では、変更はブートストラップ・スタイルシート自体に影響を与えません (ドキュメント内の別の場所に流体テーブルを持ちたい場合があります)。