Footable：携帯電話の画面の変化行位置

Question

Iは、以下のようfootableを有する：

カラムタイトルに続いて、ステータスで始まり、I、II、III、IV、V、VI、 VII、日付。

モバイルに切り替えると、次の図のように表示されます。

私は、列のステータスを再配置し、VII列の後にそれを示したいと思います。

オンラインとフットウェアのドキュメントを検索してみましたが、似たような解決策はありません。

ありがとうございました！ありがとう！

<table class="footable" cellspacing="0" border="0" id="dnn_ctr538_list_gvList" style="border-collapse:collapse;"> 
    <thead> 
    <tr class="Head nodrag nodrop" style="font-weight:normal;"> 
     <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 5%; display: table-cell;">Status</th> 
     <th align="center" valign="middle" scope="col" style="width:40%;">Title</th> 
     <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">I</th> 
     <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">II</th> 
     <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">III</th> 
     <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">IV</th> 
     <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">V</th> 
     <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">VI</th> 
     <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">VII</th> 
     <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 10%; display: table-cell;">Date</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td align="left" valign="middle" style="display: table-cell;"> 
     <div style="padding-left: 10px"> 

     </div> 
     </td> 
     <td align="left" valign="middle"> 
     <div style="padding-left: 10px"> 
      test 
     </div> 
     </td> 
     <td align="center" valign="middle" style="display: table-cell;"> 
     <img src="http://www.clker.com/cliparts/a/L/I/b/q/o/green-check-mark.svg" style="border-width:0px; width:70px; height: 70px;"> 
     </td> 
     <td align="center" valign="middle" style="display: table-cell;"> 

     </td> 
     <td align="center" valign="middle" style="display: table-cell;"> 
     <img src="http://www.clker.com/cliparts/a/L/I/b/q/o/green-check-mark.svg" style="border-width:0px; width:70px; height: 70px;"> 
     </td> 
     <td align="center" valign="middle" style="display: table-cell;"> 

     </td> 
     <td align="center" valign="middle" style="display: table-cell;"> 

     </td> 
     <td align="center" valign="middle" style="display: table-cell;"> 

     </td> 
     <td align="center" valign="middle" style="display: table-cell;"> 

     </td> 
     <td align="center" valign="middle" style="display: table-cell;"> 
     11/07/2013 
     </td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

私は完全にコードを再現することができませんでしたが、何2「ステータス」の行を追加して、異なる解像度で片方のみの表示についてはどうですか？

JSFiddle here。ブートストラップでフットブルを使用しました。

HTML

<table class="footable" cellspacing="0" border="0" id="dnn_ctr538_list_gvList" style="border-collapse:collapse;"> 
<thead> 
<tr class="Head nodrag nodrop" style="font-weight:normal;"> 
    <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 5%;" class="hide_small">Status</th> 
    <th align="center" valign="middle" scope="col" style="width:40%;">Title</th> 
    <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">I</th> 
    <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">II</th> 
    <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">III</th> 
    <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">IV</th> 
    <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">V</th> 
    <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">VI</th> 
    <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">VII</th> 
    <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 5%;" class="hide_big">Status</th> 
    <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 10%; display: table-cell;">Date</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td align="left" valign="middle" style="display: table-cell;"> 
    <div style="padding-left: 10px"></div> 
    </td> 
    <td align="left" valign="middle"> 
    <div style="padding-left: 10px">test</div> 
    </td> 
    <td align="center" valign="middle" style="display: table-cell;"> 
    <img src="http://www.clker.com/cliparts/a/L/I/b/q/o/green-check-mark.svg" style="border-width:0px; width:70px; height: 70px;"> 
    </td> 
    <td align="center" valign="middle" style="display: table-cell;"> 

    </td> 
    <td align="center" valign="middle" style="display: table-cell;"> 
    <img src="http://www.clker.com/cliparts/a/L/I/b/q/o/green-check-mark.svg" style="border-width:0px; width:70px; height: 70px;"> 
    </td> 
    <td align="center" valign="middle" style="display: table-cell;"> 

    </td> 
    <td align="center" valign="middle" style="display: table-cell;"> 

    </td> 
    <td align="center" valign="middle" style="display: table-cell;"> 

    </td> 
    <td align="center" valign="middle" style="display: table-cell;"> 

    </td> 
    <td align="center" valign="middle" style="display: table-cell;"> 
    11/07/2013 
    </td> 
</tr> 

CSS

.hide_small {display: table-cell;} 
.hide_big {display: table-cell;} 

@media (min-width: 476px) { 
    .hide_small {display: table-cell;} 
    .hide_big {display: none;} 
} 

@media (max-width: 476px) { 
    .hide_small {display: none;} 
    .hide_big { 
     display: table-cell; 
    } 

}