Same size for header and datas - html

Question

Hy guys! !I have this image:
I want to resize the first column to the minimum size and the others must cover the maximum width of the page. I'll try in this way, here is my 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 is my 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 <a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th>
<th class="family">Famiglia <a ng-click="sort_by('family')"><i class="icon-sort"></i></a></th>
<th class="productCode">Codice prodotto <a ng-click="sort_by('productCode')"><i class="icon-sort"></i></a></th>
<th class="descr">Descrizione <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 some hints!

Answer 1

in your css you have
.check{padding: 5px 0px;width:1000px}
you can change that width to width:100px or even less, resize to what suits you best
.check{padding: 5px 0px; width:100px}

Answer 2

I like to use <colgroup> and <col> for that.
Insert it directly after your table openings tag. (and delete all the width from your stylesheet)
<table>
<colgroup>
<col width="50px" />
<col span="4" width="*" />
</colgroup>
The first column will be 50px width, the four columns after it will have automatic width. Offcourse you can also set a width for every column separately.
Another benefit of these tags is that you can give all cells in a column the same class (with a simple demo):
<colgroup>
<col class="red" />
</colgroup>