jQuery Mobile增加額外頭文件的響應式表格

Question

使用jQuery Mobile - 以及對錶格使用新的響應式UI類 - 如果視口過窄，表格應該摺疊成一列。

但是 - 當我拖動瀏覽器，使視口更小，它需要的第一個列標題，並將其添加到表尾：

視口足夠寬：

窄視口：

我的HTML標記是：

 <table data-role="table" class="ui-responsive"> 
     <thead> 
      <tr class="ui-bar-b"> 
       <th>Column Header 1</th> 
       <th>Column Header 2</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td> 
        <select></select> 
       </td> 
       <td> 
        <select></select> 
       </td> 
      </tr> 
     </tbody> 
     <tfoot> 
      <tr> 
       <td colspan="2" style="text-align:center;"> 
        <button data-icon="plus">Add</button> 
       </td> 
      </tr> 
     </tfoot> 
    </table> 

我添加了一個演示，這裏的jsfiddle：http://jsfiddle.net/mtait/44k3E/2/

這只是中移動CSS中的錯誤 - 或者是已知的，有沒有解決辦法？

謝謝

馬克

Answer 1

它不增加額外的頭。這是它的工作方式。當寬度減小時，它會將標題放在每列值的上方。

爲了更好的理解，請參閱更新的小提琴鏈接。 DEMO

<table data-role="table" class="ui-responsive"> 
     <thead> 
      <tr class="ui-bar-b"> 
       <th>Column Header 1</th> 
       <th>Column Header 2</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td> 
        <select></select> 
       </td> 
       <td> 
        <select></select> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <select></select> 
       </td> 
       <td> 
        <select></select> 
       </td> 
      </tr> 
     </tbody> 
     <tfoot> 
      <tr> 
       <td> 
        <button data-icon="plus">Add</button> 
       </td> 
       <td> 
        <button data-icon="plus">Add</button> 
       </td> 
      </tr> 
     </tfoot> 
    </table>