小さい画面の解像度でテーブルが反応しない

Question

私は自分のテーブルに次のhtmlを持っていますが、小さな画面に水平スクロールを追加しています...助けてください...スクロールを外してテーブルを完全に反応させてください。ありがとう。

<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と対応が必要な方法はたくさんあります。ここではそれを行うための一つの方法は、あなたが望むように、モバイル上で水平スクロールを削除する、次のとおりです。

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; 
    } 
}