html - 表格在小屏幕分辨率下没有响应

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

处理表格和响应式需求的方式有很多种。这是一种方法，可以根据需要删除移动设备上的水平滚动条:

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