title: How to resize table width based on screen size
body: <p>I'm working on this page which contains a table inside modal-body.</p>
  
  <p>The screen i work on is 22 inch and the table looks perfect on that. But when I see it on my laptop Macbook 13 inch, the table extends to the width of the screen.  How do I resize automatically ?
  <a href="https://i.stack.imgur.com/cuSWK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cuSWK.png" alt="enter image description here"></a> </p>
  
  <pre><code>&lt;div class="modal-body"
      style="width: 1600px; margin: 0 auto; overflow: hidden;"&gt;
      &lt;loading&gt;&lt;/loading&gt;
      &lt;span us-spinner="{radius:30, width:8, length: 16}"
          spinner-key="spinner-1"&gt;&lt;/span&gt;
  
      &lt;div class="panel-group" id="accordion"&gt;
          &lt;div class="panel panel-default"
              data-ng-repeat="(spec,value) in audit | orderBy: 'specification' | groupBy: 'specification' "&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h4 class="panel-title"&gt;
                      &lt;b&gt; &lt;a data-toggle="collapse" data-parent="#accordion"
                          href="#{{$index+1}}-{{value.id}}" target="_self"
                          style="color: black"&gt;{{spec}}&lt;/a&gt;
                          &lt;button class="btn btn-xs btn-link" ng-click="details(value)"&gt;
                              &lt;i class="fa fa-info-circle" aria-hidden="true"&gt;&lt;/i&gt;
                          &lt;/button&gt;
                      &lt;/b&gt;
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div id="{{$index+1}}-{{value.id}}" class="panel-collapse collapse"&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;table class="table" style="table-layout: fixed; width: 100%"&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  ---------------
                                  ---------------
                                  ---------------
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                              &lt;tr data-ng-repeat="val in value track by $index"&gt;
                                  ----------------
                                  ----------------
                                  ----------------
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>