Тот же размер для заголовков и данных

Question

Hy guys! ! У меня есть этот образ:

Я хочу, чтобы изменить размер первого столбца до минимального размера, а остальные должны покрывать максимальную ширину страницы. Постараюсь таким образом, вот мой CSS код:

/* generic style*/ 
table, td, th { 
    border: solid# CCC;border - width: 1 px 0;border - collapse: collapse 
} 
.check { 
    padding: 5 px 0 px;width: 1000 px 
} 
.name { 
    padding: 5 px 100 px;width: 1000 px 
} 
.family { 
    padding: 5 px 40 px;width: 1000 px 
} 
.productCode { 
    padding: 5 px 30 px;width: 1000 px 
} 
.descr { 
    padding: 5 px 20 px;width: 1000 px 
} 
td { 
    padding: 5 px 0 px;width: 1000 px 
} 

/* fixed header */ 
div.tablewrap { 
    position: relative;width: 1000 px;padding - top: 20 px 
} 
div.tablewrap - inner { 
    width: 1000 px;height: 230 px;overflow: auto 
} 
div.tablewrap thead tr { 
    position: absolute;top: -3 px 
} 

Вот мой HTML-код:

<div class="tablewrap"> 
    <div class="tablewrap-inner"> 
     <div ng-controller="ctrlRead"> 
      <table class="table table-hover" border="1"> 
       <thead> 
        <tr> 
         <th class="check"> 
          <input type="checkbox" onclick="checkAll(this)" /> 
         </th> 
         <th class="name">Nome&nbsp;<a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th> 
         <th class="family">Famiglia&nbsp;<a ng-click="sort_by('family')"><i class="icon-sort"></i></a></th> 
         <th class="productCode">Codice prodotto&nbsp;<a ng-click="sort_by('productCode')"><i class="icon-sort"></i></a></th> 
         <th class="descr">Descrizione&nbsp;<a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="item in items | orderBy:sortingOrder:reverse " id="lista"> 
         <td> 
          <input id="selectLine1" type="checkbox" value="{{item.check}}" /> 
         </td> 
         <td>{{item.name}}</td> 
         <td>{{item.family}}</td> 
         <td>{{item.productCode}}</td> 
         <td>{{item.descr}}</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</div> 

Пожалуйста, дайте мне несколько советов!

Answer 1

в вашем CSS у вас есть

.check{padding: 5px 0px;width:1000px} 

вы можете изменить эту ширину width:100px или даже меньше, изменять размер, что подходит вам лучше всего

.check{padding: 5px 0px; width:100px} 

Answer 2

Мне нравится использовать <colgroup> и <col> для этого.

Вставьте его непосредственно после тега для открывания стола. (И удалить все ширины из таблицы стилей)

<table> 
    <colgroup> 
     <col width="50px" /> 
     <col span="4" width="*" /> 
    </colgroup> 

Первая колонка будет 50px шириной, четыре колонки после этого будет иметь автоматическую ширину. Вы также можете установить ширину для каждого столбца отдельно.

Еще одно преимущество этих тегов является то, что вы можете дать все ячейки в столбце один и тот же класс (с помощью простого demo):

<colgroup> 
    <col class="red" /> 
</colgroup>