jQuery 移动表答案

【问题标题】：JQuery Mobile TablejQuery 移动表
【发布时间】：2011-08-09 01:04:51
【问题描述】：

谁能指出我的任何示例或可以提供任何 Jquery Mobile 表的示例？

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

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

【问题讨论】：

除了<table>...</table>，你还想要什么？
我基本上希望它是 JQuery Mobile 的风格。
考虑使用 list 之类的东西来代替表格。
我想过，但在我的项目中我需要标题（THEAD）和列，所以这就是我考虑使用表格的原因。

标签： mobile-website jquery-mobile

【解决方案1】：

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>

更新链接：

【讨论】：

表格在没有 jQM 主题样式的情况下呈现。所以这只能证明 hte OP 不能使用表。
@Potatoswatter 这是 jQM 为表提供的（当前）jquerymobile.com/demos/1.2.0/docs/content/content-html.html（查看源代码）正在为将来的版本努力：jquerymobile.com/branches/swipe/docs/tables/index.html

【解决方案2】：

试试这个布局

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

*修复了一些小错误，但必须添加它才能进行大量编辑

【讨论】：

【解决方案3】：

如果你想要一个疯狂的替代方案，你总是可以创建一个带有网格的列表视图。它可能看起来很有趣。

【讨论】：

仅供参考 - 这种方法很快就会变成你见过的最丑陋、最不可维护的 HTML。
在您的情况下可能是这样。我在一个页面中使用了这个想法（但反过来——一个带有列表视图的网格），我对结果很满意。