Jquery mobile jQuery移动表使用名称/值列回流
jQuery移动表回流适用于带有AD的表。但是对于具有名称/值列的表,例如,4列不带THEADJquery mobile jQuery移动表使用名称/值列回流,jquery-mobile,html-table,reflow,Jquery Mobile,Html Table,Reflow,jQuery移动表回流适用于带有AD的表。但是对于具有名称/值列的表,例如,4列不带THEAD 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
如何使其响应?比如智能手机上的以下内容
Name: John
ID: 00002
Age: 22
Date: 2015-2-3
或
您需要的是一个响应性强的网格,而不是一张桌子。您可以使用jQM listview和一些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>
这是一个带有3个断点的
显然,您应该调整断点以适合您的内容…检查footable,这是一种自动化的方式--谢谢。它适用于移动设备。但是在我们的桌面版本中,没有使用jQueryMobile。@Dave,你的问题是关于jQuery Mobile的,不是吗?我们的桌面版本和移动版本使用相同的代码。理想情况下,使用相同的HTML代码,使用CSS使其响应。谢谢。@Dave,您可以将完全相同的想法应用于任何listview。它不必是jQM。只要根据需要调整CSS。如果我使用table,如何设置样式?谢谢
<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>
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%;
}
}