html 入門 ブートストラップ3テーブル-テーブルレスポンスは動作しません




bootstrap 入門 (8)

あなたはFooTableを使うことができます。 これはjQueryプラグインで、テーブル内のデータをサイズ変更して現在のブレークポイントに最適なスイートに再配分することができます。

私はウェブサイトプロジェクトにブートストラップ3を使用しています。 応答可能なテーブルを持つページを作成しようとしているので、テーブルが大きすぎるとスクロールバーが表示されます。 私はそういうテストケースを作った:

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

今、問題はそれがスクロールバーを追加しない、単にテーブルの幅にウェブサイトを展開することです。

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

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


私にとって、このクラスの応答性を壊すのはbody要素の 'min-width'値でした。


私はこの問題を抱えていて、テーブルに幅を設定したり、表を表示するように設定したりすることができました。


私はそれをやった。

<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(私のアプリからの例)で受け取るでしょう:


あなたのテーブルをこれに応答して交換する

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

テーブルの表示ブロックを設定してください

.table {
   display: block !important;
}

ブートストラップのテーブル応答は、サンドボックス環境でうまく動作しますが、実際の環境ではバグです。 バグの理由は、ブートストラップが100%とoverflow-y:hiddenという表応答スタイルの幅を与えるからです。 これらの2つのスタイルは一緒に素敵な演奏ではありません。 オーバーフロー隠蔽は、固定幅または最大幅のときに最も効果的です。 私はtable-responsiveに最大幅:270pxを与えました。 バグを修正しました。


これを試して
<div class="table-responsive">...</div>削除し<div class="table-responsive">...</div>
クラステーブルを移動する
<div class="col-12 col-sm-12 col-lg-12">



<div class="col-12 col-sm-12 col-lg-12 table-responsive">

この100%の作業が、以前のDivレイヤーに対応してクラステーブルを移動する作業をしないと、この場合、
<div class="col-12 col-sm-12 col-lg-12">
削除する必要があります。





html-table