web-dev-qa-db-ja.com

Bootstrap 3パネル内のテーブルがオーバーフローする

 <div class="col-xs-6 col-sm-4">
         <div class="panel panel-primary">
          <div class="panel-heading">Recently Filtered</div>
          <table class="table table-striped">
            <tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
            <tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
            <tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
            <tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
          </table>
        </div>
</div>

ズームインすると、パネル内のテーブルがオーバーフローします。これが画像の例ですenter image description here

この問題に対応する適切なマークアップは何ですか？私はそれが確実に適切にスケーリングできることを知っています。

htmlcsshtml5css3twitter-bootstrap
29
Aaron

いつでも追加できます.table-responsiveクラスをテーブルに追加して、水平にスクロールします。例：

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

それが望んでいるものではない場合は、フォントサイズを小さくしてより適切に合わせる必要があります。

56
South Paw

ビューポートがモバイルサイズまで応答した場合にのみ発生するようです。最も簡単な修正は、overflowルールを追加することです。

.panel {
    overflow: auto;
}

フォントサイズを変更したり、不要なテーブルセルを削除することもできます。短縮することもできます

  • ID
  • 温度
  • V
  • 日付
7
Todd

ちょうどアイデア、あなたはテーブルの周りにクラスパネルボディを持つdivを追加しようとしましたか？

1
Glaucius Zacher