Bootstrap 3 table-responsive not working within fieldset in mobile browser

问题

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>

回答1:

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

回答2:

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.

来源：https://stackoverflow.com/questions/24939388/bootstrap-3-table-responsive-not-working-within-fieldset-in-mobile-browser

标签

twitter-bootstrap

twitter-bootstrap-3

mobile-browser