Html5学习-JQuery mobile--表格
原文参考：https://blog.****.net/xiabing082/article/details/45604927
9、表格
9.1 表格模板
<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 |
9.2举例：
9.2.1两列表格
<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>
9.2.2 三列表格
添加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>
9.2.3四列表格
带图标
<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>
9.3不规则表格
<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>