我正在使用 jquery mobile 制作一个 HTML5 移动网站。它有五个向导格式的页面，每个页面查询一个 Web 服务以检索数据。最后一页有一个 HTML 表格，该表格在代码中预定义，其中填充了来自 Web 服务的数据。没有动态添加行，只是表格单元格中的占位符填充了数据。
该表在样式表中定义了一些样式，在使用桌面或移动浏览器访问时看起来不错。但是，我也在将带有 PhoneGap“Build”的移动网站编译为适用于 Android、iOS 等的原生应用程序。除了最后一页之外，这也可以正常工作，表格没有采用样式并且完全没有样式。
您可以在此处查看页面：http://m.freebets4all.com（删除空格）。只需通过向导移动到最后一页（选择 Betfred、Qualifying Bet 和任何“计算”按钮。当通过电话差距生成应用程序访问时，最后一页上的绿色表格完全没有样式。
为什么使用 PhoneGap Build 编译时表格没有样式？任何人都可以向我指出一些可以解释这一点的文档，或者有任何在 PhoneGap 下设置 HTML 表格样式的经验吗？
这是有问题的页面，显示了 html 中预定义的表格。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="phoneGap.js"></script>
<link rel="stylesheet" href="Styles/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="Styles/site.css" />
<script type="text/javascript" src="Scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="Scripts/Class.js"></script>
<script type="text/javascript" src="Scripts/matcher-1.0.js"></script>
</head>
<body>
<form>
<div class="main">
<div data-role="page" id="summary" data-title="Place Your Bets">
<script>
$('#summary').live('pagebeforecreate', function (event) {
var betSummary = new BetSummary($("#summaryTable"), localStorage.selectedBet);
setTimeout(function () { betSummary.displaySummary(); }, 1);
setTimeout(function () { $("summary").trigger('create') }, 2000);
});
</script>
<div data-role="header">
<h1>
Place your bets...</h1>
</div>
<div data-role="content">
<div class="content">
<div id="betInstructionsContainer" class="content">
<table class="matchedBet" data-role="table" id="summaryTable" data-mode="reflow">
<caption>
<p id="iDateLabel">
</p>
<p id="iMatchLabel">
</p>
<p id="iMarketLabel">
</p>
</caption>
<thead>
<tr>
<th>
</th>
<th>
Back
</th>
<th>
Lay
</th>
</tr>
</thead>
<tfoot>
<tr>
<th>
</th>
<td>
<span id="iPlLabel" class="loss"></span>
</td>
</tr>
<tr>
<th>
</th>
<td>
<span id="iGainLabel" class="gain"></span>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>
</th>
<td>
<a id="iBookieLabel" title="" href="">
<img id="iBookieImage" alt="10Bet" src="Images/logos/75x16/10Bet.gif">
</a>
</td>
<td>
<a id="iExchangeLabel" title="Click to go to the BetDaq website" href="http://www.freebets4allstage.co.uk/bookmaker/BetDaq/">
<img id="iExchangeImage" alt="BetDaq" src="Images/logos/75x16/BetDaq.gif">
</a>
</td>
</tr>
<tr>
<th id="iOddsHeader">
Odds
</th>
<td id="iBackOdds">
</td>
<td id="iLayOdds">
</td>
</tr>
<tr>
<th id="iStakeLabel">
Stake
</th>
<td id="iBackStake">
</td>
<td id="iLayStake">
</td>
</tr>
<tr>
<th id="iRiskLabel">
Risk
</th>
<td id="iBackRisk">
</td>
<td id="iLayRisk">
</td>
</tr>
<tr>
<th id="iProfitLabel">
Win
</th>
<td id="iBackProfit">
</td>
<td id="iLayProfit">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div data-position="fixed" data-role="footer">
<p class="gotosite">
<a href="http://www.freebets4all.com">Go to full website</a></p>
<p id="errorMessage">
</p>
</div>
</div>
</div>
</div>
</form>
</body>