引导表 |对小分辨率做出响应答案

【问题标题】：Bootstrap table | Make responsive for small resolution引导表 |对小分辨率做出响应
【发布时间】：2013-08-05 03:14:12
【问题描述】：

我发现当我在手机或平板电脑上打开我的表格时，使用引导程序创建的“表格”没有响应。可能是我做错了什么，但我真的不明白……

有人可以帮我解决这个问题吗？

 <div class="well">
      <table class="table table-hover table-bordered" id="results">
        <thead>
          <tr>
            <th>Užívateľ</th>
            <th>Dátum</th>
            <th>Účel</th>
            <th>Cena €</th>
            <th>Poznámka</th>
            <th>Financovanie</th>
            <th><div class="row"><span class="span1 text-center">Doklad</span></div></th>
            <th width="36px"></th>
          </tr>
        </thead>
        <tbody>

          <tr title="Posledná úprava: 3.8.2013 18:05"></tr>
            <td>Viktor Bako</td>
            <td>3.8.2013</td>
            <td>Šeky</td>
            <td>100.00</td>
            <td><div class="row"><span class="span4"></span></div></td>
            <td><div class="row"><span class="btn-danger spanNas text-center">Neuhradené</span></div></td>
            <td><div class="row"><span class="span1 text-center"><span class='text-danger'>Nie</span></span></div></td>
            <td>

            </td>
          </tr>

          <tr title="Posledná úprava: 3.8.2013 17:15">
            <td>Peter Jar&#158;embovsk&#253;</td>
            <td>3.8.2013</td>
            <td>Šeky</td>
            <td>25.00</td>
            <td><div class="row"><span class="span4"></span></div></td>
            <td><div class="row"><span class="btn-info spanNas text-center">Firemné</span></div></td>
            <td><div class="row"><span class="span1 text-center"><span class='text-danger'>Nie<span></span></div></td>
            <td>

            </td>
          </tr>

          <tr title="Posledná úprava: 3.8.2013 13:08">
            <td>Karol Hot&#225;r Hotar</td>
            <td>3.8.2013</td>
            <td>Šeky</td>
            <td>28.99</td>
            <td><div class="row"><span class="span4"></span></div></td>
            <td><div class="row"><span class="btn-info spanNas text-center">Firemné</span></div></td>
            <td><div class="row"><span class="span1 text-center"><span class='text-danger'>Nie<span></span></div></td>
            <td>

            </td>
          </tr>

          <tr title="Posledná úprava: 3.8.2013 07:52">
            <td>Karol Hot&#225;r Hotar</td>
            <td>3.8.2013</td>
            <td>Šeky</td>
            <td>28.99</td>
            <td><div class="row"><span class="span4">Pau&#353;&#225;l</span></div></td>
            <td><div class="row"><span class="btn-info spanNas text-center">Firemné</span></div></td>
            <td><div class="row"><span class="span1 text-center"><span class='text-success'>Áno<span></span></div></td>
            <td>

            </td>
          </tr>

          <tr title="Posledná úprava: 2.8.2013 23:54">
            <td>Viktor Bako</td>
            <td>2.8.2013</td>
            <td>Stravné</td>
            <td>4.10</td>
            <td><div class="row"><span class="span4">obed</span></div></td>
            <td><div class="row"><span class="btn-info spanNas text-center">Firemné</span></div></td>
            <td><div class="row"><span class="span1 text-center"><span class='text-success'>Áno<span></span></div></td>
            <td>

            </td>
          </tr>

          <tr title="Posledná úprava: 3.8.2013 14:32">
            <td>Peter Jar&#158;embovsk&#253;</td>
            <td>1.8.2013</td>
            <td>Šeky</td>
            <td>35.00</td>
            <td><div class="row"><span class="span4">je to v poriadku parada</span></div></td>
            <td><div class="row"><span class="btn-success spanNas text-center">Uhradené</span></div></td>
            <td><div class="row"><span class="span1 text-center"><span class='text-success'>Áno<span></span></div></td>
            <td>

            </td>
          </tr>
      </tbody></table></div><div class="row"><div class="well label-warning span4">Spolu: 222.08 €</div></div>

【问题讨论】：

您能提供为表格编写的 CSS 吗？
我没有这个表的 css .. 我认为只是在 bootstrap 中创建的
你使用的是什么引导版本？
表在引导程序中没有响应。 bootstrap 支持响应式布局。 getbootstrap.com/2.3.2/scaffolding.html#gridSystem
我有以前的版本

标签： html css twitter-bootstrap responsive-design html-table

【解决方案1】：

这是否接近您所追求的？

Live view
Edit view

如果是，请首先仔细检查您的 Bootstrap CSS 路径是否正确。你也有一些validation errors，这可能会导致某些设备出现问题。例如，在第 17 行和第 18 行，您有

 <tr title="Posledná úprava: 3.8.2013 18:05"></tr> 
 <td> ...

不好看

在我看来，您的表格需要超过 600 像素才能正常显示。如果您需要在小屏幕上获得更好的结果，一种选择是使用 jQuery 响应式表格插件 here's one 来帮助您入门。

祝你好运！

【讨论】：