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

Question

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>

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