21

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

これは右側で起こることです：

問題

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

このjsfiddleで問題を確認できます。ChromeやFirefoxではなくSafariで動作します。

レイアウトは次のようになります。

<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>

あなたが私を助けてくれることを願っています。さらに詳しい情報が必要な場合は、お問い合わせください。喜んで提供させていただきます。

これはRails3.2アプリで、バージョン2.2.1.1のgem bootstrap-sassを使用しています（問題は2.2.2.0でも発生します）。最初の3つの数字は、ブートストラップのバージョンを反映しています。

4

6 に答える 6

29

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

    。テーブル {
        最大幅：なし;
        テーブルレイアウト：修正済み。
        ワードラップ：ブレークワード;
    }
于 2013-09-20T17:09:58.500 に答える
23

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

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

これにより、テーブルがレスポンシブになります。

于 2014-03-21T00:34:28.490 に答える
7

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

table {
    max-width: 100%;
}

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

table {
    max-width: none;
}
于 2013-02-06T15:28:32.357 に答える
4

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

.table-scrollable{
    overflow: auto;
}

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

<div class='span11 table-scrollable'>
于 2013-05-05T22:28:22.203 に答える
0

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

于 2013-09-28T19:52:13.963 に答える
-1

私はインターネットのどこかで解決策を見つけました...

table {table-layout:fixed}

ブートストラップ2と3を使用して、FirefoxとIEの問題を解決します。

于 2013-08-28T09:14:58.190 に答える