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




bootstrap 入門 (6)

私はウェブサイトプロジェクトにブートストラップ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 -->

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

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

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


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

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

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


コードは大丈夫です。 私はちょうどフィドルをhere設定しました。

そこに働く!

私は文字通りあなたのコードをコピーして貼り付けました。 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 -->

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

.table {
   display: block !important;
}

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


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





html-table