2017-01-11 23 views
0

Я работаю над этой страницей, которая содержит таблицу внутри модального тела.Как изменить размер таблицы на основе размера экрана

Экран, на котором я работаю, составляет 22 дюйма, и стол выглядит идеально. Но когда я вижу это на моем ноутбуке Macbook 13 дюймов, таблица простирается до ширины экрана. Как изменить размер автоматически? enter image description here

<div class="modal-body" 
    style="width: 1600px; margin: 0 auto; overflow: hidden;"> 
    <loading></loading> 
    <span us-spinner="{radius:30, width:8, length: 16}" 
     spinner-key="spinner-1"></span> 

    <div class="panel-group" id="accordion"> 
     <div class="panel panel-default" 
      data-ng-repeat="(spec,value) in audit | orderBy: 'specification' | groupBy: 'specification' "> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <b> <a data-toggle="collapse" data-parent="#accordion" 
         href="#{{$index+1}}-{{value.id}}" target="_self" 
         style="color: black">{{spec}}</a> 
         <button class="btn btn-xs btn-link" ng-click="details(value)"> 
          <i class="fa fa-info-circle" aria-hidden="true"></i> 
         </button> 
        </b> 
       </h4> 
      </div> 
      <div id="{{$index+1}}-{{value.id}}" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        <table class="table" style="table-layout: fixed; width: 100%"> 
         <thead> 
          <tr> 
           --------------- 
           --------------- 
           --------------- 
          </tr> 
         </thead> 
         <tbody> 
          <tr data-ng-repeat="val in value track by $index"> 
           ---------------- 
           ---------------- 
           ---------------- 
          </tr> 
         </tbody> 
        </table> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

ответ

1

Вы можете использовать max-width вместо width, чтобы получить максимальный размер 1600 пикселей
и для небольших экранов он получает до 100%

PS: или существует ли минимальная ширина? Что о других таблицах? Требуется ли свойство table-layout?

+0

Спасибо max-width works! – je2tdam

0

Используйте процент указать ширину, где вы хотите