Question

我有一个包含8列和几行的引导表，当屏幕大小减小时我想用滚动条显示这个表，因为否则桌面会脱离包装布局。问题是滚动条是永远显示的，而它非常难看，我只想在必要时显示，我该怎么办呢？使用像这个table collapse

这样的jQuery插件会更好吗？

<div class="panel-body">
        <div class="table-responsive">
            <div class="dataTable_wrapper">
                <table class="table table-striped table-bordered table-hover"
                    id="fleetsTable">
                    <thead>
                        <tr>
                            <th>Application</th>
                            <th>Cubic</th>
                            <th>Power</th>
                            <th>Euro class</th>
                            <th>Engine Type</th>
                            <th>Traction</th>
                            <th>Transmission</th>
                            <th>Cars</th>
                            <th>Add Car</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="fleet : ${fleets}" class="odd gradeX">
                            <td class="col-xs-2" th:text="${fleet.application}"></td>
                            <td class="col-xs-1" th:text="${fleet.cubic}"></td>
                            <td class="col-xs-1" th:text="${fleet.power}"></td>
                            <td class="col-xs-1" th:text="${fleet.euroClass}"></td>
                            <td class="col-xs-1" th:text="${fleet.engineType}"></td>
                            <td class="col-xs-2" th:text="${fleet.traction}"></td>
                            <td class="col-xs-2" th:text="${fleet.transmission}"></td>
                            <td class="col-xs-1"><button id="showCarsButton"
                                    type="button" class="btn btn-primary">Show cars</button></td>
                            <td class="col-xs-1"><button id="addCarButton"
                                    type="button" class="btn btn-primary">Add car</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- /.panel-body -->
    </div>

Answer 1

使用它 table style =＆＃34; overflow：auto＆＃34;

屏幕尺寸较小时，带滚动条的Bootstrap表

1 个答案: