web-dev-qa-db-ja.com

Bootstrap 3 table-table-responsive not working

私はbootstrap 3をWebサイトプロジェクトに使用しています。テーブルが大きすぎる場合にスクロールバーが表示されるように、レスポンシブテーブルを含むページを作成しようとしています。次のようなテストケース：

<div class="row">
  <h4>Nuværende kurser</h4>
  <div class="col-12 col-sm-12 col-lg-12">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div><!-- end col-12 -->
</div><!-- end row -->

現在、問題はスクロールバーを追加せず、単にウェブサイトを表の幅まで拡大するだけです。

こちらのスクリーンショットをご覧ください。

enter image description here

私はそれが他のいくつかのウェブサイトで動作しているのを見たので、私がやっていることは間違っています...

htmltwitter-bootstraptwitter-bootstrap-3responsive-designhtml-table
20
Daniel Olsen

テーブルレスポンシブをこれに置き換えます

<div class='table-responsive'> -> <div style="overflow-x:auto;">
42
Savan Kachhiya Patel

テーブル表示を設定してくださいblock

.table {
   display: block !important;
}
16
Hamza AVvan

ブートストラップのテーブル応答は、サンドボックス環境では正常に機能しますが、ライブ環境ではバグがあります。バグの理由は、bootstrapが表応答スタイルの幅：100％およびoverflow-y：hiddenを提供するためです。これらの2つのスタイルは一緒に再生されません。固定または最大幅：テーブルレスポンシブに最大幅：270pxを指定しました;モバイルデバイス用であり、それはバグを修正しました。

6
Nate Levine

コードは大丈夫です。私はフィドルを設定しました ここ 。

そこに動作します！

あなたのコードを文字通りコピーして貼り付けました。 BootstrapのJavascriptファイルとCSSファイルへのリンクは機能していますか？

<div class="row">
 <h4>Nuværende kurser</h4>
  <div class="col-12 col-sm-12 col-lg-12">
   <div class="table-responsive">
    <table class="table">
     <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
  </div>
  </div><!-- end col-12 -->
  </div><!-- end row -->
3
ben.kaminski

この問題が発生し、テーブルにpxで設定された幅を与えるか、表示するようにテーブルを設定するように機能することがわかりました：ブロック。

2
Andrew Dant

やった.

<div style="display: table">
    <div style="display: table-row">
        <div style="display: table-cell">


            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">


                       //wrapper that will give opportunity to use: overflow-x: auto; 
                       <table style="table-layout: fixed; width: 100%;">
                           <tr>
                               <td>


                                  //SCROLL
                                  <div style="width: 100%; overflow-x: auto;">

                                      //table, that shoud have "table-responsive" bootstrap class effect
                                      <table class="table table-hover">

                                          //...table content...

                                      </table>

                                  </div>


                               <td>
                           </tr>

                       </table>                           


                    </div>
                </div>

        </div>
    </div>
</div>

Xs-screenで受信します（私のアプリの例）：

enter image description here

2
Evgeniy Miroshnichenko

FooTableを使用できます。テーブル内のデータのサイズを変更して再配布し、現在のブレークポイントに最適なjQueryプラグインです。

0
fatihdemir

私にとっては、このクラスの応答性を損なうbody要素の「最小幅」の値でした。

0
tahaerden