大佬教程收集整理的这篇文章主要介绍了Html5学习-JQuery mobile--table学习使用，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<div data-role="content">
<div class="<grid-css-attribute>">
<div class="<block-css-attribute>">Block A</div>
<div class="<block-css-attribute>">Block B</div>
</div>
</div>
(1)表格容器
| 列的数量 |
表格CSS属性 |
| 2 |
ui-grid-a |
| 3 |
ui-grid-b |
| 4 |
ui-grid-c |
| 5 |
ui-grid-d |
(2）块
| 第X列 |
块CSS属性 |
| 1 |
ui-block-a |
| 2 |
ui-block-b |
| 3 |
ui-block-c |
| 4 |
ui-block-d |
| 5 |
ui-block-e |
<div data-role="content" >
<div class="ui-grid-a">
<div class="ui-block-a"><strong>Block A</strong><br>The text will wrap within the grid.</div>
<div class="ui-block-b"><strong>Block B</strong><br>More text.</div>
</div>
</div>
添加style
<div data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e" style="height:100px;">Block A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-e" style="height:100px;">Block B</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-e" style="height:100px;">Block C</div>
</div>
</div>
</div>
带图标
<div data-role="content">
<div class="ui-grid-c" style="text-align: center;">
<div class="ui-block-a">
<img src="../images/cloud-default.png" height="57" width="57">
</div>
<div class="ui-block-b">
<img src="../images/cloud-bright.png" height="57" width="57">
</div>
<div class="ui-block-c">
<img src="../images/cloud-ripple.png" height="57" width="57">
</div>
<div class="ui-block-d">
<img src="../images/cloud-sparkle.png" height="57" width="57">
</div>
</div>
</div>
<style>
/* Set 2-column grid to 25/75% */
.ui-grid-a .ui-block-a {
width: 25%;
}
.ui-grid-a .ui-block-b {
width: 75%;
}
/* Set 3-column grid to 25/50/25% */
.ui-grid-b .ui-block-a {
width: 25%;
}
.ui-grid-b .ui-block-b {
width: 50%;
}
.ui-grid-b .ui-block-c {
width: 25%;
}
</style>
<div data-role="content" >
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">25%</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">75%</div>
</div>
</div>
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">25%</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">50%</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-e" style="text-align:center; height:100px;">25%</div>
</div>
</div>
</div>
以上是大佬教程为你收集整理的Html5学习-JQuery mobile--table学习使用全部内容，希望文章能够帮你解决Html5学习-JQuery mobile--table学习使用所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。