Fixed table header on window scroll

I have a simple Bootstrap table with a lot of rows. Is there a way to make the table header be fixed when scrolling the window, but have the width of each column header to equal the width of the row with the most text. Because when setting table header position to fixed, then the header doesn't change its width based off the content. In other words set width of each column dependent on widest value (be that title in the header or value in a cell) in the column. Is there a way to put such calculations on the header column width ? I cant think of any other way to do this. I am using angular.

Here's a jsfiddle of what I've tried when setting position of header row to fixed : JsFiddle As you can see now the columns don't align with the appropriate columns in the body. I need them to be aligned, but without setting a fixed width for every column, since I do not know how long the data I'm getting will be.

HTML code:

<div class="col-md-12 tableDiv" >
<table class="table table-striped" >
<thead class="table-bordered">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
<th>Column6</th>

</tr>
</thead>
<tbody >
<tr>
<td > FIRST</td>
<td >asdasdfasf</td>
<td >fsdf</td>
<td>sdfsfd</td>
<td>sdfs</td>
<td>fsdfsdf</td>
</tr>
<tr>
<td > asdf</td>
<td >asdfa</td>
<td >fsdf</td>
<td>sdfsfd</td>
<td>sdfs</td>
<td>fsdfsdf</td>
</tr>
<tr>
<td > asdf</td>
<td >asdfa</td>
<td >fsdf</td>
<td>sdfsfd</td>
<td>sdfs</td>
<td>fsdfsdf</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>


Css:

.table-bordered tr {
position: fixed;
z-index:1;
top: 50px;
background: #fff;
}

Continue reading...