Question

我对移动应用程序开发和jquery mobile非常陌生。现在我正在尝试将滑块插入表格。我想要的是调整列宽，以便滑块有足够的空间。代码如下。问题是根据列标题调整宽度，我不希望在我的表中有列标题。我无法理解如何通过给出百分比来调整列宽。我正在用涟漪然后在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>

Answer 1

如果您尝试将中间项目放宽的水平行中的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

jquery移动表列宽

1 个答案: