jQuery Mobile 表格

Question

jQuery Mobile 表格

mobile-websitejquery-mobile

14

有没有人能够提供jQuery Mobile表格的示例或样本？

我在他们的网站上看到了演示，但没有找到任何表格。

我需要创建一个在移动设备/ iPad上看起来不错的表格。

- Satch3000

除了<table>...</table>之外，您还需要什么？ - Matt Ball

1

我基本上希望它的样式与JQuery Mobile相同。 - Satch3000

1

考虑使用类似于列表的东西，而不是表格。 - Matt Ball

1

我考虑过这个问题，但在我的项目中，我需要标题（THEAD）和列，所以我考虑使用表格。 - Satch3000

3个回答

10

试试这种布局

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

*修复了一些小错误，但必须添加此内容才能进行实质性编辑

- Alex

1

如果你想要一个疯狂的选择，你可以在listview中创建带有网格的视图。这样看起来会很有趣。

- naugtur

2

FYI - 这种方法会迅速变成最丑陋、难以维护的HTML代码。 - Nick Daniels

这在你的情况下可能是正确的。我曾经在一个页面中使用过这个想法（但是相反的方式 - 一个包含列表视图的网格），结果我很满意。 - naugtur

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phill Pafford · Accepted Answer

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>

更新链接：