jquery移動表列寬度

我對移動應用程序開發和jQuery手機很新。現在我正試圖向表格中插入一個滑塊。我想要的是調整列寬，使滑塊有足夠的空間。代碼如下。問題是寬度根據列標題進行調整，我不希望列表中有列標題。我無法理解如何通過給出百分比來調整列寬。我正在測試它與漣漪，然後在Android平臺上。在此先感謝所有誰可能需要幫助...jquery移動表列寬度

<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>

來源

2014-01-30 user2783976

如果你想用中指項目獲得水平連續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

UPDATE：如果你仍然想使用一個表，只需使用普通的表沒有JQM數據角色

表DEMO

來源

2014-01-30 18:30:10 ezanker

非常感謝，我需要一張桌子，因爲我會添加行動態。你的表格演示鏈接就是我想要的。 – user2783976

jquery移動表列寬度

回答

相關問題