JQuery mobile table columns are one above another

Question

I want to show statistic of game inside webview in table, like ranking and history of battles. My HTML code looks like

<div data-role="page">
    <div data-role="header">
        <h1 id="title">Statistics</h1>
    </div>
    <div data-role="content">

            <div id="ranking_content">
                <table data-role="table" id="my-table" data-mode="reflow">
                    <thead>
                        <tr>
                            <th>Username</th>
                            <th>Nation</th>
                            <th>Score</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for r  in ranking %}
                        <tr>
                            <td>{{r['username']}}</td>
                            <td>{{r['nation']}}</td>
                            <td>{{r['score']}}</td>
                        </tr>
                        {% end %}
                    </tbody>
                </table>
            </div>
            <div id="history_content">
                <table data-role="table" id="my-table">
                    <thead>
                        <tr>
                            <th>Time</th>
                            <th>Against</th>
                            <th>Settlement</th>
                            <th>Gold</th>
                            <th>Rock</th>
                            <th>Wood</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for h  in history %}
                        <tr>
                            <td>{{h['time']}}</td>
                            <td>{{h['against']}}</td>
                            <td>{{h['settlement']}}</td>
                            <td>{{h['gold']}}</td>
                            <td>{{h['rock']}}</td>
                            <td>{{h['wood']}}</td>
                        </tr>
                        {% end %}
                    </tbody>
                </table>
            </div>
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar" data-position="fixed">
            <ul>
                <li>
                    <a href="#"  data-tab="ranking_content">Ranking List</a>
                </li>
                <li>
                    <a href="#" data-tab="history_content">Battles History</a>
                </li>
            </ul>
        </div><!-- /navbar -->
    </div>
</div>

(I have included jquery.mobile-1.3.0.min.css and jquery.mobile-1.3.0.min.js). It looks ok except that I don't have columns in horizontal order, it is shows username, nation, score one above another and I would like to be like normal table in one row => horizontal. How to make to be like ordinary table in html ?

Answer 1

jQuery Mobile has 2 kinds of tables.

First kind is table with reflow mode, just like one you are using. Basically that table is going to assume vertical look if screen width is to narrow. Demo can be found here.

Second kind is toggle mode table in witch table will hide some columns if there isn't enough space. Which columns are going to be hidden can be configured manually. Demo for this mode can be found here.

I don't know which device are you using so I can't give you bullet proof answer but my advice would be to use toggle table. Unless you are required to show every possible column this mode will look much more natural. One last thing, if you are manually setting column width, instead of that let jQuery Mobile table decide which width is best for the table.