レスポンステーブルは、xsデバイスにあるときにデータを切り捨てます。

Question

ウェブページ（特にxsデバイス）を縮小すると、右側のデータがカットされます。しかし、それは小型、中型および大型デバイスで応答します。私はtable-responsiveクラスを追加しましたが、まだ同じです。ここで

それがうまくいかないところのスクリーンショット

は、あなたがしてくださいを確認することができますか？

ありがとうございました

ここに私のコードです。

<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1 table-responsive"> 
      <table class="table table-hover"> 
       <thead> 
        <tr> 
         <th>Ürün</th> 
         <th>Adet</th> 
         <th class="text-center">Ücreti</th> 
         <th class="text-center">Toplam</th> 
         <th> </th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td class="col-xs-12 col-sm-8 col-md-6"> 
          <div class="media"> 
           <a class="img-thumbnail pull-left" href="#"><img class="media-object img-product-cart" src="~/Content/images/kitap/kitap2.jpg"/></a> 
           <div class="media-body"> 
            <h4 class="media-heading"><a href="#">Matematik</a></h4> 
            <h5 class="media-heading">Yazar: Halil Kayaduman</h5> 
            <h5 class="media-heading">ISBN: 1234567897</h5> 
            <span>Durum:</span><span class="text-success"><strong>Stokta 10 adet var.</strong></span> 
           </div> 
          </div> 
         </td> 
         <td class="col-xs-3 col-sm-1 col-md-1" style="text-align:center;"> 
          <input type="email" class="form-control" id="exampleInputEmail" value="3" /> 
         </td> 
         <td class="col-xs-3 col-sm-1 col-md-1 text-center"><strong>45.12 TL</strong></td> 
         <td class="col-xs-3 col-sm-1 col-md-1 text-center"><strong>135.36 TL</strong></td> 
         <td class="col-xs-3 col-sm-1 col-md-1"> 
          <button type="button" class="btn btn-danger"> 
           <span class="glyphicon glyphicon-remove"></span> Kaldır 
          </button> 
         </td> 
        </tr> 
       </tbody> 
       <tfoot> 
        <tr> 
         <td> </td> 
         <td> </td> 
         <td> </td> 
         <td><h5>Ürün Fiyatı<br />Kargo Ücreti</h5><h3>Toplam</h3></td> 
         <td class="text-right"><h5><strong>45.98 TL <br /> 3.99 TL</strong></h5><h3>123.12 TL</h3></td> 
        </tr> 
        <tr> 
         <td> </td> 
         <td> </td> 
         <td> </td> 
         <td> 
          <button type="button" class="btn btn-default"> 
           <span class="glyphicon glyphicon-shopping-cart"></span> Alişverişe Devam 
          </button> 
         </td> 
         <td> 
          <button type="button" class="btn btn-success"> 
           Ödeme Sayfasına Geç <span class="glyphicon glyphicon-play"></span> 
          </button> 
         </td> 
        </tr> 
       </tfoot> 
      </table> 
     </div> 
    </div> 

Answer 1

あなたは親マーカーに.table-responsiveクラスを与えたためです：<div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1">

ちょうどあなたのテーブルクラス属性の内部で切断して、そのクラスを過ぎて、この<table class="table table-responsive table-hover">

Answer 2

のようにその内のテーブル応答puting試してみてください自分のdivとそれがどのように動作するか見て、私はあなたの問題の原因かもしれないグリッド構造を想像することができます。

<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1"> 
    <div class="table-responsive"> 
     <table class="table table-hover"> 

      <thead> 
       <tr> 
        <th>Ürün</th> 
        <th>Adet</th> 
        <th class="text-center">Ücreti</th> 
        <th class="text-center">Toplam</th> 
        <th> </th> 
       </tr> 
      </thead> 

      <tbody> 
       <tr> 
        <td class="col-xs-12 col-sm-8 col-md-6"> 
         <div class="media"> 
          <a class="img-thumbnail pull-left" href="#"><img class="media-object img-product-cart" src="~/Content/images/kitap/kitap2.jpg"/></a> 
          <div class="media-body"> 
           <h4 class="media-heading"><a href="#">Matematik</a></h4> 
           <h5 class="media-heading">Yazar: Halil Kayaduman</h5> 
           <h5 class="media-heading">ISBN: 1234567897</h5> 
           <span>Durum:</span><span class="text-success"><strong>Stokta 10 adet var.</strong></span> 
          </div> 
         </div> 
        </td> 

        <td class="col-xs-3 col-sm-1 col-md-1" style="text-align:center;"> 
         <input type="email" class="form-control" id="exampleInputEmail" value="3" /> 
        </td> 

        <td class="col-xs-3 col-sm-1 col-md-1 text-center"><strong>45.12 TL</strong></td> 

        <td class="col-xs-3 col-sm-1 col-md-1 text-center"><strong>135.36 TL</strong></td> 

        <td class="col-xs-3 col-sm-1 col-md-1"> 
         <button type="button" class="btn btn-danger"> 
          <span class="glyphicon glyphicon-remove"></span> Kaldır 
         </button> 
        </td> 

       </tr> 


      </tbody> 

      <tfoot> 
       <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td><h5>Ürün Fiyatı<br />Kargo Ücreti</h5><h3>Toplam</h3></td> 
        <td class="text-right"><h5><strong>45.98 TL <br /> 3.99 TL</strong></h5><h3>123.12 TL</h3></td> 
       </tr> 

       <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> 
         <button type="button" class="btn btn-default"> 
          <span class="glyphicon glyphicon-shopping-cart"></span> Alişverişe Devam 
         </button> 
        </td> 
        <td> 
         <button type="button" class="btn btn-success"> 
          Ödeme Sayfasına Geç <span class="glyphicon glyphicon-play"></span> 
         </button> 
        </td> 
       </tr> 
      </tfoot> 

     </table> 
    </div> 
</div> 
</div>