有没有人能够提供jQuery Mobile表格的示例或样本?
我在他们的网站上看到了演示,但没有找到任何表格。
我需要创建一个在移动设备/ iPad上看起来不错的表格。
有没有人能够提供jQuery Mobile表格的示例或样本?
我在他们的网站上看到了演示,但没有找到任何表格。
我需要创建一个在移动设备/ iPad上看起来不错的表格。
http://jquerymobile.com/demos/1.0a4.1/#docs/forms/../../docs/content/content-html.html 右键点击并查看源代码:
<table summary="This table lists all the JetBlue flights.">
<caption>Travel Itinerary</caption>
<thead>
<tr>
<th scope="col">Flight:</th>
<th scope="col">From:</th>
<th scope="col">To:</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">Total: 3 flights</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">JetBlue 983</th>
<td>Boston (BOS)</td>
<td>New York (JFK)</td>
</tr>
<tr>
<th scope="row">JetBlue 354</th>
<td>San Francisco (SFO)</td>
<td>Los Angeles (LAX)</td>
</tr>
<tr>
<th scope="row">JetBlue 465</th>
<td>New York (JFK)</td>
<td>Portland (PDX)</td>
</tr>
</tbody>
</table>
CSS
<style type="text/css">
table { width:100%; }
table caption { text-align:left; }
table thead th { text-align:left; border-bottom-width:1px; border-top-width:1px; }
table th, td { text-align:left; padding:6px;}
</style>
更新链接:
试试这种布局
<ul>
<li> <!--first item -->
<table>
<tr>
<td>Heading1</td>
<td>Meaning1</td>
</tr>
<tr>
<td>Heading2</td>
<td>Meaning2</td>
</tr>
<tr>
<td>Heading3</td>
<td>Meaning3</td>
</tr>
</table>
</li>
<li> <!-- second item -->
<table>
<tr>
<td>Heading1</td>
<td>Meaning1</td>
</tr>
<tr>
<td>Heading2</td>
<td>Meaning2</td>
</tr>
<tr>
<td>Heading3</td>
<td>Meaning3</td>
</tr>
</table>
</li>
</ul>
并且还有 CSS
ul {
width: 100%;
margin-left: 0px;
padding: 0px;
}
ul li {
list-style-type: none;
border-bottom: 1px dashed gray;
margin-top: 10px;
}
*修复了一些小错误,但必须添加此内容才能进行实质性编辑
<table>...</table>
之外,您还需要什么? - Matt Ball