web-dev-qa-db-ja.com

Bootstrap 4レスポンシブテーブルの幅が100％にならない

Bootstrap 4を使用してWebアプリケーションを作成していて、いくつかの奇妙な問題が発生しています。 Bootstrapのテーブル対応クラスを利用して、モバイルデバイス上のテーブルを水平方向にスクロールできるようにしたいです。デスクトップデバイスでは、テーブルはそれを含むDIVの幅の100％を占めるはずです。

テーブルに.table-responseクラスを適用するとすぐに、テーブルは水平方向に縮小し、幅の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-responseクラスに100％の幅を適用すると、テーブル自体は100％の幅になりますが、子要素（TBODY、TRなど）はまだ狭いです。

cssbootstrap-4
64
eat-sleep-code

次はうまくいきません。それは別の問題を引き起こします。それは今100％の幅を行いますが、それは小型のデバイスには反応しません。

.table-responsive {
    display: table;
}

これらすべての回答は、display: table;を推奨することによって別の問題を引き起こしました。今のところ唯一の解決策はラッパーとしてそれを使うことです：

<div class="table-responsive">
  <table class="table">
...
 </table>
</div>
114
John FatBoy Doeeee Rolla

この解決策は私のために働きました：

あなたのtable要素に別のクラスを追加するだけです：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）

ブートストラップ4の表示ドキュメント

19
Faytraneozter

V4.1を使用していて、彼らの文書に従って、テーブルに直接.table-respondを割り当てないでください。テーブルは.tableでなければならず、水平にスクロール可能（レスポンシブ）にしたい場合は、.tableレスポンシブコンテナ（例えば<div>）内に追加します。

レスポンシブテーブルを使用すると、テーブルを簡単に水平方向にスクロールできます。 .table-respondで.tableをラップすることですべてのビューポートでテーブルをレスポンシブにする

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

そうすれば、追加のCSSは必要ありません。

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

11
Marcelo Myara

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

.table-responsive {
    display: table;
}

バグレポートを提出することがあります。

編集：

これは既存のバグです。

6
Serg Chernata

フレームワークのv4に準拠した解決策は、適切なブレークポイントを設定することです。 .table-respond-smを使用するのではなく、.table-respond-smを使用できるようにする必要があります。

使用可能な任意のエンドポイントを使用できます。table-respond {{-sm | -md | -lg | -xl}

2
Rubén_ic

これらの答えはどれもうまくいきません（今日の日付、2018年12月9日）。ここでの正しい解決策は、テーブルに.table-respond-smを追加することです。

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

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

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

1
SongBox

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

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

これは.table-responsiveクラスがあなたの要素にdisplay: blockというプロパティを追加していて、それが以前のものから変更されているdisplay: table。

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

.table-responsive {
    display: table;
}

注：このスタイルを上書きするには、ブートストラップコードの後に​​このスタイルを実行してください。

1
Nikhil Nanjappa

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

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

例えば.

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

私はラッパーの中で推奨されるテーブルレスポンシブクラスを使用してもレスポンシブテーブルが（驚くべきことに）水平方向に縮小することを依然として引き起こしていることがわかりました。

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

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

0
ScottyB