Bootstrap 3 table-responsive not working within fi

2019-08-25 07:21发布

站内问答 / 前沿技术
1436 2 6

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>

2条回答
Viruses.
2楼-- · 2019-08-25 07:55

It turns out this issue can appear on mobile browsers when the viewport width is not set to the device's width. Add this element in your <head> and it will help Chrome at least.

<meta name="viewport" content="width=device-width">

See the answer from @bootstrapthemer to get mobile Mozilla to handle fieldset width in the way we are used to. Mozilla is aware of this bug and more info from Mozilla can be found here.

查看更多
0人赞 添加讨论(0) 举报
兄弟一词,经得起流年.
3楼-- · 2019-08-25 07:59

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">
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)