html - Same size for header and datas -


hy guys! !i have image:

enter image description here

i want resize first column minimum size , others must cover maximum width of page. i'll try in way, here css code:

/* 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 } 

here html code:

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

please give me hints!

in css have

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

you can change width width:100px or less, resize suits best

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

Comments

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

javascript - Add class to another page attribute using URL id - Jquery -

firefox - Where is 'webgl.osmesalib' parameter? -