CODEWITHSUNDEEP
htmlcsstwitter-bootstrapjquery-mobileresponsive-design
user1528794
user1528794

Reputation: 107

JqueryMobile Adding a 2 columns table

I would like to add a responsive table with 2 columns using jquerymobile.

! column should be aligned to the left and the other to the right. The result was that 2 columns were displayed 1 under the other, which is not what I want.

How can I display a 2 columns table using responsive table for mobile in a way that the left cell is displayed on the left and the right cell is displayed on the right, just as normal table should apper and not 1 cell below the other. (the wepapp is using jqm)

<div data-role="main" class="ui-content">
<table style="width:100%" data-role="table" class="ui-responsive">
  <thead>
    <tr>
      <th data-priority="1" style="text-align:left"></th>
      <th data-priority="1" style="text-align:right"></th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align:left">1</td>
      <td style="text-align:right">Alfreds Futterkiste</td>

    </tr>

  </tbody>
</table>

Upvotes: 0

Views: 386

Answers (1)

ezanker
ezanker

Reputation: 24738

Just remove the data-role=table:

Here is a DEMO

<table id="MyTable" class="ui-responsive table-stroke">
    <thead>
        <tr>
            <th class="left">Col 1</th>
            <th class="right">Col 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="left">Row 1 Col 1</td>
            <td class="right">Row 1 Col 2</td>
        </tr>
        <tr>
            <td class="left">Row 2 Col 1</td>
            <td class="right">Row 2 Col 2</td>
        </tr>
        <tr>
            <td class="left">Row 3 Col 1</td>
            <td class="right">Row 3 Col 2</td>
        </tr>
        <tr>
            <td class="left">Row 4 Col 1</td>
            <td class="right">Row 4 Col 2</td>
        </tr>                
    </tbody>
</table>

#MyTable {
    width: 100%;
}
#MyTable .left {
    text-align: left;
}
#MyTable .right {
    text-align: right;
}

Upvotes: 1

Related Questions