2016-11-09 18 views
0

データベースのデータを満たすテーブルがあります。私はブラウザの幅を減らし続けたときにブートストラップを使用していましたが、1つのポイントからテーブルはコンテナの外に出ています。これをどのように反応させることができますか?以下のブートストラップを使用する場合はブートストラップテーブルが応答しません

<table class="table table-responsive table-bordered"> 


      <tr> 
       <th>Spare Id</th> 
       <th>Part Number</th> 
       <th>Quantity</th> 
       <th>Price</th> 
       <th>Warranty</th> 
       {{--<th>Description</th>--}} 
       <th>Spare Image</th> 

       <th> 


        <input type="text" class="form-control" id="search" placeholder="Search Spare"> 
       </th> 


      </tr> 
      <tbody id="tableModel"> 
      <?php 
      foreach($spares as $spare){ 

      ?> 
      <tr> 
       <td ><?php echo $spare->id;?></td> 
       <td ><?php echo $spare->partNumber;?></td> 
       <td ><?php echo $spare->quantity;?></td> 
       <td ><?php echo 'Rs.'. $spare->price;?></td> 
       <td ><?php echo $spare->warranty;?></td> 


       <td><?php echo '<img class="img-responsive" src="data:image/jpeg;base64,'.base64_encode($spare->image).'"/>';?></td> 
       <td> 

        <a class=" btn btn-success btn-sm" data-toggle="modal" data-target="#modalEdit" onclick="EditBrand('<?php echo $brand->brandName;?>','<?php echo $brand->id;?>')" >Edit </a> 

        <a onclick="DeleteBrand(<?php echo $brand->id;?>)" style="" class=" btn btn-danger btn-sm" >Delete </a> 

       </td> 

      </tr> 

      <?php }?> 
      </tbody> 


     </table> 

This is when the normal width

When i kept on decreasing the size

+2

写真は素晴らしいですが、コードを確認する必要があります。 [mcve] – j08691

+0

を参照してくださいあなたのテーブルはおそらく固定幅または最小幅を持っています – Jon

+0

いいえいいえ幅は – hEShaN

答えて

3

添付画像です。テーブルdivtable-responsiveクラスでラップします。

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

ブートストラップが正しく統合されていれば動作するはずです。あなたのコードを示してください。もっと多くの人々があなたを助けるでしょう。

+0

私はすでにそれをやったと呼ばれるスタイルはありません。 – hEShaN

+0

ニース。私の答えはあなたの問題を解決します。私の答えのdiv要素に注意してください! – Nope

+0

ありがとうございます。 – hEShaN

関連する問題