Html 表对小屏幕分辨率没有响应

我的表格有以下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>

高级工程师
名称
费用明细
费用日期
数量
1.
阿米尔·肖布
abc
2016-04-09
25
2.
阿米尔·肖布
hjk
2016-04-09
57
3.
阿米尔·肖布
uuu
2016-04-10
56
全部的
1222

有许多方法可以处理

表格和响应需求。下面是一种方法，根据您的意愿删除手机上的水平滚动：


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