Table with fixed header and dynamic height - html

Question

I know there are a lot of these questions already answered but non that fit my requirements. I have a table of unknown height and width and I need to, if the table is too high so that one needs to scroll through it, that the table headers stay fixed and follow the scroll. All solutions I've seen require a fixed height of the table. I would also want the scroll to be invisible while still functional. Can this be accomplished or do I need the fixed height?
My CSS so far allows me to scroll both vertically and horizontally (I only want the vertical scroll) but with fixed height and visible scroll bar:
table.sol-compare-table {
box-sizing: border-box;
overflow: hidden;
display: table;
width: 100%;
}
table.sol-compare-table thead, table.sol-compare-table tbody {
float: left;
width: 100%;
}
table.sol-compare-table tbody {
overflow: auto;
height: 150px;
/*overflow-x: hidden;*/
}
table.sol-compare-table tr {
width: 100%;
display: table;
text-align: left;
}
Here is my HTML:
<table class="table sol-compare-table">
<thead>
<tr>
<th>
<div>
<a class="sol-pdf-generator hover-gray-icon sol-share-icon" target="_blank" ng-href="#">
<i class="fa fa-file-pdf-o"></i>
Ladda ner som PDF
</a>
<a class="sol-share-facebook hover-gray-icon sol-share-icon" onclick="#">
<img src="#" alt="facebook">
</a>
<a class="sol-share-twitter hover-gray-icon sol-share-icon" onclick="#">
<img src="#" alt="twitter"><!--<i class="fa fa-twitter"></i>-->
</a>
<a class="sol-share-mail hover-gray-icon sol-share-icon" onclick="#">
<i class="glyphicon glyphicon-envelope"></i>
</a>
</div>
<h2 class="sol-compare-heading">Allmän Information<h2>
</th>
<th ng-repeat="unit in units" class="sol-compare-heading">
<div>
<a href="#/unitDetail/{{unit.Id}}">
<img class="detail-main-image" ng-if="getImageOfUnit(unit).Value.Id" ng-src="#"></img>
</a>
</div>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="#">
<td>Name</td>
<td ng-repeat="unit in units">
<span ng-if="unitAttr.Value != null">
<span print-attribute="#"></span>
</span>
<span ng-repeat="#" ng-if="unitAttr.Values">
#
</span>
<span ng-if="# == null && unitAttr.Values == null">
-
</span>
</td>
</tr>
</tbody>
</table>
EDIT
I tried with using position:fixed at the table header and that almost accomplish what I'm after, only that it should be fixed at the top of the page at all times (when scrolling down it should follow the scroll but the same position in the browser window). This JSfiddle is the easiest way to show where I'm at atm I guess; http://jsfiddle.net/rwqkokgy/5/

Answer 1

For vertical scrollbar You have to use overflow-y:scroll; overflow-x:hidden;
You can use overflow-y:auto; and vertical scrollbar will be show/hide depend of table content.
There is one example, but with two tables. First one is header and second for table content. Maybe You can achieve on this way.
jsfiddle example
In this example is one button, too. For simulating with and without scrollbar, depending of table content.
That button and js function called chVl You can remove. First function called checkW is used if You resize Your browser.
I hope so this will help You.
Edit :
If You want vertical scrollbar all time, then do next (in provided jsfiddle example) :
Remove onload and onresize from body
Remove complete javascript
In #container (css) for overflow-y replace from auto to scroll
About height in #container, You can change it by Your needs.
And, of course, remove that button, like i wrote above. His purpose is just for simulation, nothing else.

Answer 2

I'm now using an Angular directive called "sticky" which makes it so that the "sticky" element (which I set to be the table header) sticks to the top of the screen when scrolling.
For more information about this directive, please follow this link: http://angularscript.com/angularjs-directive-create-fixed-elements-scroll-angular-sticky/
It was very easy to implement and required almost no coding at all.