Создайте интерактивную таблицу с использованием jquery mobile

Мне нужно интерактивное «таблица» в моем приложении. Самый близкий я получил, используя listviewer и ссылки в сочетании с сеткой. Приведенный ниже пример - это то, что мне нужно (clickable tablerow и отдельная кнопка справа). Моя проблема в том, что я не могу выровнять «тесные столбцы» с заголовками заголовков, потому что кнопка в моем «корпусе таблицы» смещает сетку.Создайте интерактивную таблицу с использованием 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

ответ

Смежные вопросы