Столбцы мобильных таблиц JQuery расположены один над другим

Question

Я хочу показать статистику игры внутри веб-просмотра в таблице, например, рейтинг и историю сражений. Мой HTML-код выглядит

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

(Я включил jquery.mobile-1.3.0.min.css а также jquery.mobile-1.3.0.min.js). Это выглядит нормально, за исключением того, что у меня нет столбцов в горизонтальном порядке, это показывает имя пользователя, нацию, счет один над другим, и я хотел бы быть как обычная таблица в одном ряду => горизонтальный. Как сделать, чтобы быть похожим на обычную таблицу в HTML?

Answer 1

В jQuery Mobile есть 2 вида таблиц.

Первый тип - это таблица с режимом перекомпоновки, как и тот, который вы используете. По сути, эта таблица будет принимать вертикальный вид, если ширина экрана будет узкой. Демо можно найти здесь.

Второй тип - таблица режимов переключения в таблице ведьм, если не хватит места. Какие столбцы будут скрыты, можно настроить вручную. Демо для этого режима можно найти здесь.

Я не знаю, какое устройство вы используете, поэтому не могу дать вам пуленепробиваемый ответ, но мой совет - использовать таблицу переключения. Если вам не требуется показывать все возможные столбцы, этот режим будет выглядеть более естественным. И последнее: если вы вручную устанавливаете ширину столбца, вместо этого пусть таблица jQuery Mobile решает, какая ширина лучше для таблицы.