Twitterブートストラップテーブルの幅が常に100％になるのはなぜですか？

次のマークアップを想定します。

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

セルの数に関係なく、テーブルの幅は常に100％です。なんで？

ブートストラップ内のすべてのテーブルはコンテナに応じて拡大し.span*ます。これは、選択したグリッド要素内にテーブルを配置することで簡単に実行できます。このプロパティを削除する場合は、独自のテーブルクラスを作成して、内容を展開するテーブルに追加するだけです。

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

このクラスを独自のスタイルシート内に追加し、次のように単純にテーブルのコンテナに追加できます。

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

このようにして、変更がブートストラップスタイルシート自体に影響を与えることはありません（ドキュメントの他の場所に流動的なテーブルが必要になる場合があります）。

<table style="width: auto;" ...正常に動作します。Chrome 38、IE 11、Firefox 34でテスト済み。

jsfiddle：http ://jsfiddle.net/rpaul/taqodr8o/

Bootstrap 4を使用している場合は、を使用します.w-auto。

https://getbootstrap.com/docs/4.1/utilities/sizing/を参照してください

回答＃1：

なぜそれと戦うのですか？なぜブートストラップグリッドを使用してテーブルの幅を単純に制御しないのですか？これはBootstrap 3マークアップです。

<div class="row">
    <div class="col-sm-6">
        <table></table>
    </div>
</div>

これにより、要素の幅の半分（12のうち6）のテーブルが作成されます。

他の回答のようにインラインスタイルを使用することもありますが、お勧めしません。

回答＃2：

ブートストラップ4を使用している場合は、次のような幅のヘルパークラスがいくつかあります。

w-25, w-50, w-75, and w-100

これがドキュメントです：https : //getbootstrap.com/docs/4.0/utilities/sizing/

私は同じ問題を抱えていました、私はテーブルを修正してから私のtd幅を指定しました。あなたが持っているなら、あなたもそれらを行うことができます。

<style>
table {
table-layout: fixed;
word-wrap: break-word;
}
</style>

<td width="10%" /td>

.table-nonfluidには運がありませんでした。

追加しようとしましたが、うまくいきましstyle="width: auto !important"た！