Question

我发现当我在手机或平板电脑上打开表格时，使用bootstrap创建的“表格”没有响应。也许我做错了什么，但我真的不明白......

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

 <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>

Answer 1

这接近你所追求的吗？

Live view
Edit view

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

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

看起来不太好

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

祝你好运！

Bootstrap表|为小分辨率做出响应

1 个答案: