Отзывчивая таблица отключает данные, когда она находится в устройстве xs.

Question

Когда я сжимаю веб-страницу (особенно в устройствах xs), она обрезает правые данные. Однако он реагирует на малые, средние и крупные устройства. Я добавил table-responsive класс, но все тот же.

Вот скриншот

Вы можете проверить, пожалуйста, где это идет не так?

Thanks

Это мой код;

<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

Попробуйте кладя стол реагирующими внутри его собственный 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>