Question

当我使用＆＃34;表格响应＆＃34;我的桌子上的包装器水平滚动条不显示在较小的屏幕上，当我添加＆＃34; display：block！important＆＃34;在桌面上，滚动条适用于小屏幕，但在大屏幕上会在右侧留下不需要的空间，如下图所示。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="form-group">
        <div class="table-responsive">
        <table id="main-table" class="table table-bordered" style="display: block !important;>
            <thead>
                <tr>
                    <th>Item No</th>
                    <th style="width:25%">Description</th>
                    <th style="width:10%">PAX</th>
                    <th>Unit Price</th>
                    <th style="width:11%">No of Days</th>
                    <th>Amount ZMK</th>
                    <th style="width:6%"></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="only-numbers" contenteditable="true"></td>
                    <td contenteditable="true"></td>
                    <td class="only-numbers pax" contenteditable="true"></td>
                    <td class="only-numbers price" contenteditable="true"></td>
                    <td class="only-numbers" contenteditable="true"></td>
                    <td class="only-numbers non-edit total"></td>
                    <td class="remove-row">
                        <a href="#" class="btn btn-default btn-sm" role="button">
                            <span class="glyphicon glyphicon-remove"></span>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td class="only-numbers" contenteditable="true"></td>
                    <td contenteditable="true"></td>
                    <td class="only-numbers pax" contenteditable="true"></td>
                    <td class="only-numbers price" contenteditable="true"></td>
                    <td class="only-numbers" contenteditable="true"></td>
                    <td class="only-numbers non-edit total"></td>
                    <td class="remove-row">
                        <a href="#" class="btn btn-default btn-sm" role="button">
                            <span class="glyphicon glyphicon-remove"></span>
                        </a>
                    </td>
                </tr>
                <tfoot>
                    <tr>
                        <th colspan="5">Total</th>
                        <td class="non-edit">
                            <strong id="grand-total">0.00</strong>
                        </td>
                        <td class="non-edit"></td>
                    </tr>
                </tfoot>
            </tbody>
        </table>
        </div>
    </div>

＆＃13;

Answer 1

添加“after table style attribute。

<table id="main-table" class="table table-bordered" style="display: block !important;">

响应表上不需要的空间

1 个答案: