javascript - 在 Jquery 移动表中添加水平滚动？

Question

我有以下标记，

<table class="ui-responsive table-stroke ui-table ui-table-columntoggle"
    data-mode="columntoggle" data-role="table" style=
    "overflow-x: scroll !important;">
        <thead>
            <tr>
                <th class="ui-table-priority-6" data-colstart="1"
                data-priority="6" style="font-weight: bold;">SL</th>

                <th class="ui-table-priority-6" data-colstart="2"
                data-priority="6" style="font-weight: bold;">Cat</th>

                <th class="ui-table-priority-6" data-colstart="3"
                data-priority="6" style="font-weight: bold;">Brand</th>

                <th class="ui-table-priority-6" data-colstart="4"
                data-priority="6" style="font-weight: bold;">Product</th>

                <th class="ui-table-priority-persist" data-colstart="5"
                data-priority="persist" style="font-weight: bold;">Item
                Code</th>

                <th class="ui-table-priority-persist" data-colstart="6"
                data-priority="persist" style="font-weight: bold;">Model
                Number</th>

                <th class="ui-table-priority-6" data-colstart="7"
                data-priority="6" style="font-weight: bold;">Bundle Value</th>

                <th class="ui-table-priority-persist" data-colstart="8"
                data-priority="persist" style="font-weight: bold;">Old RSP</th>

                <th class="ui-table-priority-persist" data-colstart="9"
                data-priority="persist" style="font-weight: bold;">Promo
                RSP</th>

                <th class="ui-table-priority-6" data-colstart="10"
                data-priority="6" style="font-weight: bold;">Reduced %age</th>

                <th class="ui-table-priority-6" data-colstart="11"
                data-priority="6" style="font-weight: bold;">Start Date</th>

                <th class="ui-table-priority-6" data-colstart="12"
                data-priority="6" style="font-weight: bold;">Vendor End
                Date</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td class="ui-table-priority-6">
                    <p>A115</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>SDA</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>Panasonic</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>Blender</p>
                </td>

                <td class="ui-table-priority-persist">
                    <p>11651099</p>
                </td>

                <td class="ui-table-priority-persist">
                    <p>MXAC400</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>GV 50</p>
                </td>

                <td class="ui-table-priority-persist">
                    <p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 399</strong></p>
                </td>

                <td class="ui-table-priority-persist">
                    <p>
                    <strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;399</strong></p>
                </td>

                <td class="ui-table-priority-6">
                    <p>0%</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>Feb 26th</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>Mar 8th</p>
                </td>
            </tr>

            <tr>
                <td class="ui-table-priority-6">
                    <p>C073</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>SDA</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>Tefal</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>Fryer</p>
                </td>

                <td class="ui-table-priority-persist">
                    <p>11480473</p>
                </td>

                <td class="ui-table-priority-persist">
                    <p>FZ700072</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>PB</p>
                </td>

                <td class="ui-table-priority-persist">
                    <p><strong>999</strong></p>
                </td>

                <td class="ui-table-priority-persist">
                    <p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 749</strong></p>
                </td>

                <td class="ui-table-priority-6">
                    <p>25%</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>Mar 1st</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>Will Revert</p>
                </td>
            </tr>
        </tbody>
    </table>

我可以添加水平标记吗？方便用户左右滚动

Answer 1

你可以像这样用 div 包裹你的表格:

<div style="width: 100%; height: 400px; overflow: auto">
  <table>
    <!-- table content -->
  </table>
</div>