JQuery mobile - просмотр списка с несколькими столбцами

Question

Мне нужно показать 3 столбца в виде списка. Я пробовал иметь стол внутри <li><table></table></li>, но его не выглядел хорошо. Есть ли способ показать 3 столбца в виде списка?

Я попробовал ui-grid-b для 3 столбцов. но проблемы с CSS ... jsfiddle.net/9ZBAS/1 Я пробовал, и я мог видеть перекрывающиеся столбцы, если я использую href и работаю find, если не использую href, но без href я не мог получить следующую кнопку значка.

Любая помощь?

Answer 1

попробовать этот один

<li > 
    <div class="ui-grid-b"> 
    <div class="ui-block-a">Block A</div> 
    <div class="ui-block-b">Block B</div> 
    <div class="ui-block-c">Block C</div> 
</div> 


</li> 

Проверить эту ссылку ;; http://jquerymobile.com/test/docs/content/content-grids.html

---

Отредактировано

---

Проверить это один http://jsfiddle.net/9ZBAS/47/

---

Answer 2

Альтернатива макета сетки, используя таблицы. Это не хорошо документированы в jQM

• http://jquerymobile.com/demos/1.1.0/docs/content/content-html.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> 

Вид:

Похожие:

• JQuery Mobile Table