我有一个 footable 如下:
该列以状态开头,然后是标题、I、II、III、IV、V、VI、VII、日期。
切换到手机新版时,也是按照如下图所示的顺序
我想重新排列 Status 列并将其显示在 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>
最佳答案
我无法完全重现代码,但是添加两个“状态”行并以不同的分辨率只显示其中一个呢?
JSFiddle here .我将 Footable 与 Bootstrap 结合使用。
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;
}
关于css - Footable:更改手机屏幕中的行位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47297580/