masa küçük ekran çözünürlüğüne duyarlı değil

Question

Masam için html'yi takip ediyorum ancak küçük ekranda yatay kaydırma ekliyor ... lütfen bana yardım edin. Bu kaydırma çubuğunu kaldırmak ve tabloyu tamamen yanıtlamak için kullanın. Teşekkürler.

<div class="table-responsive col-12 col-sm-12 col-lg-12"> 
<table class="table table-hover table-bordered text-capitalize" style="margin-top: 20px"> 
    <tr style="background-color :black; color: white"> 
     <th>Sr.No</th> 
     <th>Name</th> 
     <th>Expense Detail</th> 
     <th>Expense Date</th> 
     <th>Amount</th> 
    </tr> 
      <tr> 
      <td>1</td> 
      <td>aamir shoeb</td> 
      <td>abc</td> 
      <td>2016-04-09</td> 
      <td>25</td> 
     </tr> 
      <tr> 
      <td>2</td> 
      <td>aamir shoeb</td> 
      <td>hjk</td> 
      <td>2016-04-09</td> 
      <td>57</td> 
     </tr> 
      <tr> 
      <td>3</td> 
      <td>aamir shoeb</td> 
      <td>uuu</td> 
      <td>2016-04-10</td> 
      <td>56</td> 
     </tr> 
     <tr class="success"> 
     <td colspan="3" style="visibility: hidden"></td> 
     <td>Total</td> 
     <td>1222</td> 
    </tr> 
</table> 
</div> 

Answer 1

table ve duyarlı ihtiyaçları ile başa çıkmak için birçok yol vardır.

See it here

CSS

@media (max-width:480px){ 
    /* Force table to not be like tables anymore */ 
    table, thead, tbody, th, td, tr { 
     display: block; 
    } 
    tr td { 
     text-align: center; 
     border-bottom: 1px solid #ccc; 
     border-left: 1px solid #ccc; 
     border-right: 1px solid #ccc; 
    } 
    tr td:last-child { 
     border-bottom: 3px solid #333; 
    } 
} 

: istediğiniz gibi İşte bunu yapmak için tek yönlü mobil yatay kaydırma kaldırarak olduğunu