Bootstrap 3 表响应在移动浏览器的字段集中不起作用 [英] Bootstrap 3 table-responsive not working within fieldset in mobile browser

问题描述

我正在创建一个 Web 应用程序，发现如果我使用字段集，然后使用表格响应，那么页面上会出现水平滚动条，分辨率为 (320*480).如果我删除了 fieldset 那么它工作正常.

我希望它们都出现在我的页面中.

我也尝试将 .table-responsive div 放在一行中 > col-xs-12 但它并没有帮助相同的水平滚动.

<legend>测试员</legend><div class="table-responsive"><table class="table"><头><tr><th>#</th><th>表格标题</th><th>表格标题</th><th>表格标题</th><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr></thead><tr><td>1</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr></tbody>

</fieldset>

解决方案

Github Issue

通过添加 :display:table-cell; 修复它宽度:100% 到字段集

jsFiddle 演示

CSS

.responsive-fieldset {display:table-cell;宽度:100%}

HTML

I am creating an web app and found that if I used fieldset and then table responsive then a horizontal scroll comes on page on resolution of (320*480). If I removed fieldset then it worked fine .

I want both of them in my page.

I also tried by putting .table-responsive div in a row > col-xs-12 but it doesn't help same horizontal scroll comes.

<fieldset>
    <legend>Tester</legend>
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
        </tbody>
      </table>
    </div>
</fieldset>

解决方案

Github Issue

Fix it by adding :display:table-cell; width: 100% to fieldset

jsFiddle Demo

CSS

.responsive-fieldset {display:table-cell; width: 100%}

HTML

<fieldset class="responsive-fieldset">

这篇关于Bootstrap 3 表响应在移动浏览器的字段集中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！