CODEWITHSUNDEEP
jquery-mobile
Valery Bulash
Valery Bulash

Reputation: 413

Why simple jQuery mobile table shown transposed?

Put on page sample (and simple) table:

<table id="myTable">
<thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
        <td>Row 1 Column 3</td>
    </tr>
    <tr>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
        <td>Row 2 Column 3</td>
    </tr>
</tbody>
</table>

No surprise in showing - header is a row, trs inside body - rows. Look at this:

Column 1    Column 2    Column 3
Row 1 Column 1  Row 1 Column 2  Row 1 Column 3
Row 2 Column 1  Row 2 Column 2  Row 2 Column 3

Then trying to make table jQuery-styled - just add data-role="table" to table tag. Surprise - table whown transposed: 1) head is column (!) 2) rows are columns. Look at this:

Column 1Row 1 Column 1
Column 2Row 1 Column 2
Column 3Row 1 Column 3
Column 1Row 2 Column 1
Column 2Row 2 Column 2
Column 3Row 2 Column 3

Is it default behaviour? What's up? How to force jQuery table being normal?

Upvotes: 0

Views: 894

Answers (1)

msapkal
msapkal

Reputation: 8346

There are two data-mode's' by default it is reflow, wherein it collapses the table columns into a stacked presentation that looks like blocks of label/data pairs for each row. This behavior is evident only in mobile devices, however in deskop/tablet this will look like a normal table.

Large tables with lots of columns don't fit on smaller screens, hence there is another mode called as columntoggle which allows user to toggle the columns.

However in order to have default table structure as seen in desktop browser either get rid of data-role attribute or set data-role='none'

Put data-mode="columntoggle"

<table data-role="table" id="my-table" data-mode="columntoggle">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Column 1</td>
            <td>Row 1 Column 2</td>
            <td>Row 1 Column 3</td>
        </tr>
        <tr>
            <td>Row 2 Column 1</td>
            <td>Row 2 Column 2</td>
            <td>Row 2 Column 3</td>
        </tr>
    </tbody>
</table>

Add the following styles to hide the column button: 

.ui-table-columntoggle-btn { display: none;}

DEMO

Upvotes: 4

Related Questions