表格对小屏幕分辨率没有响应答案

【问题标题】：table not responsive on small screen resolution表格对小屏幕分辨率没有响应
【发布时间】：2016-07-31 12:24:27
【问题描述】：

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

【问题讨论】：

标签： html css twitter-bootstrap responsive-design html-table

【解决方案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;
    }
}

【讨论】：