Las columnas de la tabla móvil JQuery están una encima de la otra

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>

(He incluido jquery.mobile-1.3.0.min.css y 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 ?

preguntado el 05 de mayo de 13 a las 15:05

because JQM tables are responsive to screen width, hence, it converts each row to look like a separate table with headers aligned vertically. -

1 Respuestas

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 aquí.

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 aquí.

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.

contestado el 05 de mayo de 13 a las 19:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.