Bootstrap 4レスポンシブテーブルは100％幅を占有しません

96

Bootstrap 4を使用してWebアプリを構築していて、奇妙な問題が発生しています。Bootstrapのテーブルレスポンシブクラスを利用して、モバイルデバイスでテーブルを水平方向にスクロールできるようにしたいと考えています。デスクトップデバイスでは、テーブルは含まれているDIVの幅の100％を占める必要があります。

.table-sensitiveクラスをテーブルに適用するとすぐに、テーブルが水平方向に縮小し、幅の100％を占有しなくなります。何か案は？

これが私のマークアップです：

<!DOCTYPE html>
<html lang="en" class="mdl-js">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="application-name" content="">
    <meta name="theme-color" content="#000000">
    <link rel="stylesheet" href="/css/bundle.min.css">
</head>
<body>
    <div class="container-fluid no-padding"> 
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive" id="Queue">
                    <thead>
                        <tr>
                            <th><span span="sr-only">Priority</span></th>
                            <th>Origin</th>
                            <th>Destination</th>
                            <th>Mode</th>
                            <th>Date</th>
                            <th><span span="sr-only">Action</span></th>
                         </tr>
                      </thead>
                      <tbody>
                          <tr class="trip-container" id="row-6681470c-91ce-eb96-c9be-8e89ca941e9d" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d">
                              <td>0</td>
                              <td>PHOENIX, AZ</td>
                              <td>SAN DIEGO, CA</td>
                              <td>DRIVING</td>
                              <td><time datetime="2017-01-15T13:59">2017-01-15 13:59:00</time></td>
                              <td><span class="trip-status-toggle fa fa-stop" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d" data-trip-status="1"></span></td>
                          </tr>
                          <tr class="steps-container" data-steps-for="6681470c-91ce-eb96-c9be-8e89ca941e9d" style="display: none;">
                              <td colspan="6" class="no-padding"></td>
                          </tr>
                      </tbody>
                  </table>
              </div>
           </div>
           <br>
        </div>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="/js/bundle.min.js"></script>
     </body>
</html>

.table-sensitiveクラスに100％の幅を適用すると、テーブル自体は100％の幅になりますが、子要素（TBODY、TRなど）はまだ狭いです。

css bootstrap-4

— 食べて睡眠コード
ソース

158

次は動作しません。別の問題が発生します。これで100％の幅になりますが、小さいデバイスでは反応しません：

.table-responsive {
    display: table;
}

これらすべての回答は、を推奨することで別の問題を引き起こしましたdisplay: table;。現時点での唯一の解決策は、それをラッパーとして使用することです。

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

— ジョン・ファットボーイ・ドーイー・ローラ
ソース

2

永遠にこれを試してみて、単にそれをラップすることを考えるには早すぎます。あなたの男

— JSF

table-responsiveクラスをラッパーとして使用すると、Bootstrap 3に戻ってきます...？今のところ解決策があります。ブートストラップ4 アルファ ;-)

— Steve Meisner

ベータ版でこの動作を見ることはありません。divを削除し、「table」に沿って「table-sensitive」を追加する必要があるようです。そうです。<table class = "table table-

— Winnemucca

この問題はブートストラップ4ではまだ解決されていませんが、ブートストラップ3から4への移行手順の一部はあなたの答えに同意していますが、「レスポンシブテーブルにはラッピング要素が不要になりました。代わりに、.table-sensitive <table>の右側にあります。 "...ここにあります：getbootstrap.com/docs/4.0/migration/#tables

— Marin

バージョン4.3.1で完全に動作します！ありがとう

— イブラヒムイサ

38

この解決策は私にとってうまくいきました：

別のクラスをテーブル要素に追加するだけです。 w-100 d-block d-md-table

だからそれは： <table class="table table-responsive w-100 d-block d-md-table">

ブートストラップ4の場合w-100、幅を100％d-block（表示：ブロック）およびd-md-table（表示：最小幅のテーブル：576px）に設定します

Bootstrap 4表示ドキュメント

— フェイトラネオスター
ソース

2

Bootstrap4 Betaで動作します！キーはw-100でした。ありがとうございました。

— ObjectiveTC

このソリューションには、単に実行するのと同じ効果はありません<table class="table table-responsive-md">か？

— JamesWilson

20

V4.1を使用していて、そのドキュメントに従って、.table-sensitiveをテーブルに直接割り当てないでください。テーブルは.tableである必要があり、水平方向にスクロール可能（レスポンシブ）にしたい場合は、.tableレスポンシブコンテナー（<div>たとえば）内に追加します。

レスポンシブテーブルを使用すると、テーブルを簡単に水平にスクロールできます。.tableを.table-sensitiveでラップすることにより、すべてのビューポートですべてのテーブルを応答可能にします。

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

そうすることで、追加のCSSは必要ありません。

OPのコードでは、.table-sensitiveを外側の.col-md-12と一緒に使用できます。

— マルセロ・ミアラ
ソース

3

ブートストラップの安定版以来、これは正しい答えになるはずです。Thx

— ピーター

2

これが答えです。ありがとう

— -Gjaa

1

正解！

— Andrew Schultz

6

なんらかの理由で、特にレスポンシブテーブルは本来の動作をしません。あなたはそれを取り除くことでパッチを当てることができますdisplay:block;

.table-responsive {
    display: table;
}

バグレポートを提出できます。

編集：

これは既存のバグです。

— セルグ・チェルナータ
ソース

5

これらの回答はどれも機能していません（日付は本日2018年12月9日）。ここでの正しい解決策は、テーブルに.table-responsive-smを追加することです。

<table class='table table-responsive-sm'>
[Your table]
</table>

これは、SMビュー（モバイル）にのみ応答性の側面を適用します。そのため、モバイルビューでは必要に応じてスクロールし、大きなビューではテーブルが応答しないため、必要に応じて全幅で表示されます。

ドキュメント：https : //getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific

— SongBox
ソース

2

フレームワークのv4に準拠するソリューションは、適切なブレークポイントを設定することです。.table-sensitiveを使用するのではなく、.table-responsive-smを使用できるようにする必要があります（小さなデバイスで単に応答するため）

使用可能な任意のエンドポイントを使用できます：テーブルレスポンシブ{-sm | -md | -lg | -xl}

— Rubén_ic
ソース

1

これは、.table-responsiveクラスがプロパティdisplay: blockを要素に追加して、前のプロパティから変更するためdisplay: tableです。

このプロパティをオーバーライドしdisplay: tableて、独自のスタイルシートに戻します

.table-responsive {
    display: table;
}

注：このスタイルは、ブートストラップコードの後にオーバーライドして実行するようにしてください。

— ニキル・ナンジャッパ
ソース

1

これtable-responsiveは、テーブルにのプロパティを与えるクラスが原因で発生しますdisplay:block。これは、table元のクラスを上書きし、display:table追加するとテーブルが縮小する理由ですtable-responsive。

おそらくブートストラップ4がまだ開発中です。設定する独自のクラスでこのプロパティを上書きしても安全display:tableであり、テーブルの応答性には影響しません。

例えば

.table-responsive-fix{
   display:table;
}

— カラム
ソース

1

他の答えを考慮して、私はこのようなことをします、ありがとう！

.table-responsive {
    @include media-breakpoint-up(md) {
        display: table;
    }
}

— アレクシス
ソース

1

.table-sensitive {-sm | -md | -lg | -xl}で.tableをラップしてレスポンシブテーブルを作成し、最大576px、768px、それぞれ992px、1120px。

テーブルを.table-sensitive {-sm | -md | -lg | -xl}でラップするだけ

例えば

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

ブートストラップ4テーブル

— iMezied
ソース

0

ラッパーで推奨されるテーブルレスポンシブクラスを使用すると、レスポンシブテーブルが（意外にも）水平方向に縮小することがわかりました。

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

私の解決策は、それを防ぐために次のメディアブレークポイントとクラスを作成することでした。

.table-xs {
    width:544px;
}

.table-sm {
    width: 576px;
}

.table-md {
    width: 768px;
}

.table-lg {
    width: 992px;
}

.table-xl {
    width: 1200px;
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 576px) {  
    .table-sm {
        width: 100%;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }

    .table-xl {
        width: 100%;
    }
}

次に、適切なクラスをテーブル要素に追加できます。例えば：

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

ここで、ラッパーは幅を100％に設定して、Bootstrapごとに大きくします。table-lgクラスをtable要素に適用すると、テーブルの幅も100％以上に設定されますが、それ以上の場合は992pxに設定されます。クラスtable-xs、table-sm、table-md、およびtable-xlは同じように機能します。

— ScottyB
ソース

0

Bootstrap 4.xの場合は、表示ユーティリティを使用します。

w-100 d-print-block d-print-table

使い方：

<table class="table w-100 d-print-block d-print-table">

— ボラ
ソース

0

「sr-only」要素とテーブル内のそのスタイルがこのバグの原因であるようです。少なくとも私は同じ問題を抱えていて、何ヶ月も壁に頭をぶつけた後、それが原因だと判断しましたが、それでも理由はわかりません。left:0「sr-only」スタイルに追加すると修正されました。

— ブリンニューウェル
ソース