html - jquery 移动表格列宽

Question

我对移动应用程序开发和 jquery mobile 非常陌生。现在我正在尝试将 slider 插入表格。我想要的是调整列宽，使 slider 有足够的空间。代码如下。问题是宽度是根据列标题调整的，我不想在我的表格中有列标题。我不明白如何通过给定百分比来调整列宽。我正在用 ripple 测试它，然后在 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%;
    }
}

调整断点值和宽度以满足您的需要...

Here is a DEMO

更新:如果您仍想使用表，只需使用没有 jQM 数据 Angular 色的普通表

table DEMO