使用 jquery mobile 创建一个可点击的表格行答案

【问题标题】：create a clickable table row using jquery mobile使用 jquery mobile 创建一个可点击的表格行
【发布时间】：2014-02-18 16:03:21
【问题描述】：

我的应用中需要一个可点击的“表格”。我得到的最接近的是使用列表查看器和链接与网格相结合。下面的示例是我需要的（一个可点击的表格行和右侧的单独按钮）。我的问题是我无法将“body-columns”与“header-titles”对齐，因为“table body”中的按钮偏移了网格。

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>

【问题讨论】：

标签： jquery-mobile jquery-mobile-listview jquery-mobile-grid

【解决方案1】：

只需向分隔线添加右填充以匹配列表项：

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

更新FIDDLE

【讨论】：

感谢您的回答！除非有不需要使用 CSS 的解决方案，否则我会将您的答案标记为“已接受的答案”。我正在努力将我的 CSS 自定义保持在最低限度。