jQuery的移动表列宽度
我对手机应用程序开发和jQuery手机很陌生。 现在我正试图向表格中插入一个滑块。 我想要的是调整列宽，使滑块有足够的空间。 代码如下。 问题是宽度根据列标题进行调整，我不希望列表中有列标题。 我无法理解如何通过给出百分比来调整列宽。 我正在测试它与涟漪，然后在Android平台上。 在此先感谢所有想要帮助的人......
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div data-role="page">
<div data-role="content">
<table data-role="table" data-mode="reflow" id="my-table" style="width: 100%">
<thead>
<tr>
<th>Column1</th>
<th style="width: 90%">Column2</th>
<th>Column3</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="" id="" width="30" height="30"></td>
<td class="title">
<form class="full-width-slider">
<label for="slider-12" class="ui-hidden-accessible">Slider:</label>
<input type="range" name="slider-12" id="slider-12" min="0"
max="100" value="50" data-mini="true">
</form>
</td>
<td>
<input type="text" maxlength="14" size="4" name="" id="" data-mini="true" value="" />
</td>
</tr>
</tbody>
</table>
</div>
如果您试图在中间项宽的水平行中获取3个项目，为什么不使用具有自定义宽度和断点的jQM网格？
<div class="rwd-example">
<div class="ui-block-a" style="margin-top: 0.5em;">
<img src="http://lorempixel.com/30/30" id="" width="30" height="30" />
</div>
<div class="ui-block-b" >
<label for="slider-12" class="ui-hidden-accessible">Slider:</label>
<input type="range" name="slider-12" id="slider-12" min="0" max="100" value="50" data-mini="true" />
</div>
<div class="ui-block-c" >
<input type="text" maxlength="14" size="4" name="" id="" data-mini="true" value="" />
</div>
</div>
那么列的CSS将如下所示：
/* Stack all blocks to start */
.rwd-example .ui-block-a,
.rwd-example .ui-block-b,
.rwd-example .ui-block-c {
width: 100%;
float: none;
}
/* 1st breakpoint */
@media all and (min-width: 23em) {
.rwd-example {
overflow: hidden; /* Use this or a "clearfix" to give the container height */
}
.rwd-example .ui-block-a,
.rwd-example .ui-block-c{
float: left;
width: 9.95%;
}
.rwd-example .ui-block-b {
float: left;
width: 79.925%;
}
}
/* 2nd breakpoint */
@media all and (min-width: 55em) {
.rwd-example .ui-block-a,
.rwd-example .ui-block-c {
float: left;
width: 4.95%;
}
.rwd-example .ui-block-b {
float: left;
width: 89.925%;
}
}
/* 3rd breakpoint */
@media all and (min-width: 75em) {
.rwd-example .ui-block-a,
.rwd-example .ui-block-c {
float: left;
width: 2.95%;
}
.rwd-example .ui-block-b {
float: left;
width: 93.925%;
}
}
调整断点值和宽度以满足您的需求...
这是一个DEMO
更新：如果您仍想使用表，只需使用不含jQM数据角色的普通表
表DEMO
链接地址: http://www.djcxy.com/p/65383.html