Fixing table header on webpage - css

Question

I would like to know how to fix a table header even if we scroll down on a website and out of the table view.
I would like to use css style to do this. Thank you.
I would also like to know how to fix an element on a webpage so it always appears even when we scroll down. The image can be text. Use div and css

Answer 1

You would do something like this by tapping into the scroll event handler on window, and using another table with a fixed position to show the header at the top of the page.
Example:
var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);
$(window).bind("scroll", function() {
var offset = $(this).scrollTop();
if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
$fixedHeader.show();
}
else if (offset < tableOffset) {
$fixedHeader.hide();
}
});
body { height: 1000px; }
#header-fixed {
position: fixed;
top: 0px; display:none;
background-color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-1">
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
<table id="header-fixed"></table>

Answer 2

Taken from an old post of mine, here's an example of both things that you want done together in one fiddle.
JSFiddle
JQuery:
function moveScroll() {
var scroll = $('#table-container').offset().top;
var anchor_top = $("#maintable").offset().top;
var anchor_bottom = $("#bottom_anchor").offset().top;
if (scroll > anchor_top && scroll < anchor_bottom) {
clone_table = $("#clone");
if (clone_table.length === 0) {
clone_table = $("#maintable").clone();
clone_table.attr({
id: "clone"
}).css({
position: "fixed",
"pointer-events": "none",
left: $("#maintable").offset().left + 'px',
top: 130
}).width($("#maintable").width());
$("#table-container").append(clone_table);
$("#clone").width($("#maintable").width());
$("#clone thead").css({
visibility: "true"
});
$("#clone tbody").css({
visibility: "hidden"
});
var footEl = $("#clone tfoot");
if (footEl.length) {
footEl.css({
visibility: "hidden"
});
}
}
} else {
$("#clone").remove();
}
}
$('#table-container').scroll(moveScroll);