jquery mobile table column width

Question

I am very new to mobile application development and jquery mobile. Right now i am trying to insert a slider to a table. What i want is to adjust the column width so that the slider has enough space. The code is as below. The problem is the widths are adjusted according to column header and i don't want to have column headers in my table. I cannot understand how i can adjust the column width by giving percentage. i'm testing it with ripple and then on android platform. thanks in advance for all who might want to help...

    <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

If you are trying to get the 3 items in a horizontal row with the middle item wide, why not use a jQM grid with custom widths and breakpoints?

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

The CSS for the columns would then look something like this:

/* 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%;
    }
}

Tweak the breakpoint values and widths to meet your needs...

Here is a DEMO

UPDATE: if you still want to use a table, just use a plain table without the jQM data-role

table DEMO