jQuery 移动 table 重排 name/value 列

Question

jQuery 移动 table 回流与 THEAD 一起工作 tables。但是对于 table 和 name/value 列，例如，没有 THEAD

的 4 列

Name:   John                ID:     00002
Age:    22                  Date：   2015-2-3

如何让它响应？在智能手机上点赞

Name:   John                
ID:     00002
Age:    22                  
Date：  2015-2-3

或

Name:   
John                
ID:     
00002
Age:    
22                  
Date：  
2015-2-3

Answer 1

您想要的是响应式网格而不是 table。您可以使用 jQM 列表视图和一些 CSS 媒体查询来更改不同设备宽度的布局。

标记应遵循以下原则：

<ul data-role="listview" data-inset="true">
    <li>
        <div class="ui-grid-a">
            <div class="ui-block-a">Name:</div>
            <div class="ui-block-b">John</div>
        </div>
    </li>
    <li>
        <div class="ui-grid-a">
            <div class="ui-block-a">ID:</div>
            <div class="ui-block-b">00002</div>
        </div>
    </li>
    <li>
        <div class="ui-grid-a">
            <div class="ui-block-a">Age:</div>
            <div class="ui-block-b">22</div>
        </div>
    </li>
    <li>
        <div class="ui-grid-a">
            <div class="ui-block-a">Date:</div>
            <div class="ui-block-b">2015/2/3</div>
        </div>
    </li>
</ul>

然后使用CSS使列表项在不同的断点处向左浮动：

html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.my-page .ui-listview li .ui-block-a{
    color: #999;
}
.my-page .ui-listview li .ui-block-b{
    color: #111;
}

/* First breakpoint is 48em (768px). 2 column layout.  */
 @media (min-width: 48em) {
    .my-page .ui-listview li {
        float: left;
        width: 50%;
        margin: 0;
        border-radius: 0;
        border: rgb(221, 221, 221) solid 1px;
    }
}
/* Second breakpoint is 63.75em (1020px). 4 column layout.  */
 @media (min-width: 63.75em) {
    .my-page .ui-listview li {
        width: 25%;
    }
}

Here is a DEMO with 3 breakpoints

显然您应该调整断点以适合您的内容...

jQuery 移动 table 重排 name/value 列

jQuery mobile table reflow with name/value columns

html-table

reflow

jquery-mobile