在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> 

Answer 2

如果表>窗口寬度滾動將可見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>