Question

我想在表格中显示webview中的游戏统计数据，例如排名和战斗历史。我的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）。它看起来没问题，除了我没有水平顺序的列，它显示用户名，国家，一个在另一个上面得分，我想像一行中的普通表=＆gt;水平。如何使得像html中的普通表？

Answer 1

jQuery Mobile有两种表格。

第一种是具有回流模式的表，就像您正在使用的那样。如果屏幕宽度要缩小，基本上该表将采用垂直外观。可以找到演示here。

第二种是如果没有足够的空间，女巫表中的切换模式表会隐藏一些列。可以手动配置要隐藏的列。可以在 here 找到此模式的演示。

我不知道你使用的是哪种设备，所以我不能给你防弹答案，但我的建议是使用切换表。除非您需要显示每个可能的列，否则此模式看起来会更自然。最后一点，如果您手动设置列宽，而不是让jQuery Mobile表决定哪个宽度最适合该表。

JQuery移动表列是一个在另一个之上

1 个答案: