0

我想在表格中显示 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）。它看起来不错，除了我没有按水平顺序排列的列，它显示用户名、国家、得分一个在另一个之上，我想像一行中的普通表 => 水平。如何在html中制作成普通的表格？

4

1 回答 1

2

jQuery Mobile 有 2 种表格。

第一种是带有回流模式的表格，就像您正在使用的那样。基本上，如果屏幕宽度变窄，该表格将呈现垂直外观。演示可以在这里找到。

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

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

于 2013-05-05T18:02:14.223 回答