在Jquery Mobile Table中添加Horizo​​ntal Scroll？

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>

Answer 2

如果表＆gt;窗口宽度滚动将在dy默认情况下可见。

检查CSS样式和js（jQuery Mobile可以将表固定为窗口宽度）

您也可以使用div容器，例如：

<div style="width:300px;overflow:auto">
  <table>...</table>
</div>

Answer 3

上面的答案对我有用;但是，我不想指定明确的宽度或高度，所以以下问题更好地解决了问题：

<div style="overflow-x: auto;">
  <table [...] </table>
</div>