使用jquery mobile創建可點擊的表格行

我需要一個可點擊的「表」在我的應用程序。我得到的最接近的是使用listviewer和鏈接與網格的組合。下面的例子是我需要的（一個可點擊的表格和一個單獨的按鈕）。我的問題是，由於我的「表體」中的按鈕偏移了網格，因此我無法將「body-columns」與「header-titles」對齊。使用jquery mobile創建可點擊的表格行

http://jsfiddle.net/lokkin/p9M8p/3/

<!DOCTYPE html> 
<html> 

    <head> 
     <title>Test</title> 
     <meta name="viewport" content="width=device-width" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" /> 
     <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script> 
    </head> 

    <body> 
     <div data-role="page" id="index"> 
      <ul data-role="listview" data-split-icon="gear" data-inset="true"> 
       <li data-role="list-divider"> 
        <div class="ui-grid-d"> 
         <div class="ui-block-a">TRK</div> 
         <div class="ui-block-b">STATUS</div> 
         <div class="ui-block-c">NR</div> 
         <div class="ui-block-d">PFIX</div> 
         <div class="ui-block-e">EHNR</div> 
        </div> 
       </li> 
       <li> <a href="#Select" class="ui-grid-d"> 
         <div class="ui-block-a"> 
          TRUCK1 
         </div> 
         <div class="ui-block-b"> 
          123 
         </div> 
         <div class="ui-block-c"> 
          ABC123 
         </div> 
         <div class="ui-block-d"> 
          456 
         </div> 
         <div class="ui-block-e"> 
          789 
         </div> 

        </a> 
<a href="#Details" data-inline="true" data-transition="slide">Details</a> 

       </li> 
      </ul> 
     </div> 
    </body> 

</html>

來源

2014-02-18 user3324166

恰到好處填充添加到分頻器匹配時listItems：

.ui-li-divider{ 
    padding-right: 56px !important; 
}

更新FIDDLE

來源

2014-02-18 16:13:25 ezanker

謝謝您的回答！除非有解決方案，我不需要使用CSS，否則我會將您的答案標記爲「已接受的答案」。我正在努力將我的CSS自定義降到最低。 – user3324166

使用jquery mobile創建可點擊的表格行

回答

相關問題