web-dev-qa-db-ja.com

ブートストラップ：流動テーブルがウィンドウには広すぎます

Twitterブートストラップを使用してプロジェクトに取り組んでいます。たくさんの列があり、ほとんど毎回ブラウザウィンドウよりも大きくなるテーブルがあります。

これは右側で何が起こるかです：

The Problem

テーブルの境界線はブラウザウィンドウに残りますが、テーブルのコンテンツは残りません。スクロールすると、境界線はそのままの位置に留まり、ブラウザウィンドウを「追跡」しません。

あなたは問題を見ることができます このjsfiddleで 。 Safariでは機能しますが、ChromeまたはFirefoxでは機能しません）。

レイアウトは次のとおりです。

<body>
  <div class='container-fluid'>
    <div class='row-fluid'>
      <div class='span1'>
        ... menusidebar here...
      </div>
      <div class='span11'>
        <table class="table table-striped table-bordered" style="white-space: nowrap">
          <thead>
            <tr>
            </tr>
          </thead>
          <tbody>
            <tr>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>

あなたが助けてくれるといいのですが。さらに詳しい情報が必要な場合は、お気軽にお問い合わせください。

これはRails 3.2アプリ、バージョン2.2.1.1のgem bootstrap-sassを使用しています（問題は2.2.2.0でも発生します）。最初の3つの数字はbootstrapバージョン。

twitter-bootstraphtml-tablefluid-layout
18
ksol

ブートストラップには、テーブルに適用される次のスタイルがあります。

table {
    max-width: 100%;
}

カスタムスタイルシートでそのプロパティをオーバーライドすると、問題が解決するはずです。 「なし」に変更すると機能するはずです。

table {
    max-width: none;
}
6
Billy Moat

これは私のために働いた唯一の解決策でした...

 
 .table {
 max-width：none; 
 table-layout：fixed; 
 Word-wrap：break-Word; 
}
24
diogoareia

Bootstrap 3を使用している場合、別のアプローチはテーブルを

<div class="table-responsive"><table>...</table></div>

これにより、テーブルが応答しやすくなります。

20
Shirren

Style = "overflow：auto;"を適用できます。テーブルに水平スクロールバーを配置します。したがって、デザインの応答性は維持されます。コードに従ってください：

.table-scrollable{
    overflow: auto;
}

そして、あなたのdivでそれを使用してください：

<div class='span11 table-scrollable'>
4
Eduardo Arruda Pimentel

スタイル= "overflow：auto;"の適用私にとってはうまくいきました

0
user2245138