使用jQuery Mobile的响应表

Question

I have 3 tables that must be positioned below each other when the screen width becomes smaller. 当屏幕宽度变小时，我必须将3张桌子放置在彼此下方。 Normally I would use float: left; 通常我会使用float: left; on the surrounding containers of each table, but that doesn't work. 在每个表的周围容器上，但这不起作用。 It will break my jquery mobile layout. 它将破坏我的jquery移动布局。

I thought I will make a small grid layout then, but that collapses my tables instead of positioning them below each other. 我以为我会做一个小的网格布局，但是这会使我的桌子折叠而不是将它们放置在彼此下面。

How can I position 3 tables below each other when the screen width decreases, without using float, and without breaking the jquery mobile layout? 当屏幕宽度减小时，如何在不使用float且不破坏jquery移动布局的情况下如何将3个表彼此定位？

Here's a sample of my page layout: 这是我的页面布局示例：

<body class="container">
    <div data-role="page" data-theme="a">
        <div data-role="header" data-position="inline">
            <h1>Title</h1>
        </div>
        <div data-role="content" data-theme="a">
            <div data-demo-html="true">         
                <div data-role="collapsible-set" data-theme="a" data-content-theme="d" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
                    <div data-role="collapsible" data-collapsed="false">
                    </div>
                    <div data-role="collapsible">
                        <h3>Title</h3>
                        <div class="ui-grid-b">
                            <div class="ui-block-a">
                                <form class="form-search">
                                    <div class="content">
                                        <h3>Title</h3>
                                        <table class="center alfabet">
                                            <tr>
                                                <td>Blabla</td>
                                                <td>Blabla</td>
                                                <td>Blabla</td>
                                                <td></td>
                                            </tr>
                                        </table>
                                    </div>
                                </form>
                            </div>
                            <div class="ui-block-b">
                                <form class="form-search">
                                    <div class="content">
                                        <table class="center alfabet">
                                            <tr>
                                                <td>Blabla</td>
                                                <td>Blabla</td>
                                                <td>Blabla</td>
                                                <td></td>
                                            </tr>
                                        </table>
                                    </div>
                                </form>
                            </div>
                            <div class="ui-block-c">
                                <form class="form-search">
                                    <div class="content">
                                        <table class="center alfabet">
                                            <tr>
                                                <td>Blabla</td>
                                                <td>Blabla</td>
                                                <td>Blabla</td>
                                                <td></td>
                                            </tr>
                                        </table>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div data-role="collapsible">                   
                </div>
            </div>
        </div>
    </div>
</body>

Answer 1

Solved it with Bootstrap Fluid Grid system 用Bootstrap流体网格系统解决

.row-fluid{width:100%;*zoom:1;}.row-fluid:before,.row-fluid:after{display:table;content:"";line-height:0;}
.row-fluid:after{clear:both;}
.row-fluid [class*="span"]{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.127659574468085%;*margin-left:2.074468085106383%;}
.row-fluid [class*="span"]:first-child{margin-left:0;}
.row-fluid .span4{width:31.914893617021278%;*width:31.861702127659576%;}


<div class="row-fluid">
     <div class="span4">
          Table 1 here
     </div>
     <div class="span4">
          Table 2 here
     </div>
     <div class="span4">
          Table 3 here
     </div>
</div>

使用jQuery Mobile的响应表

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-11-01 13:19:24

使用jQuery Mobile的响应表

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-11-01 13:19:24

解决方案1
0 已采纳 2013-11-01 13:19:24