Blogger Active LINK Class - html

Here is my html menu button :
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
How to add this class on current URL?
<td class="active">25</td>
How can I accomplish to make this work?


$('table td a').click(function(e){
$('table td').removeClass('active');
$(this).parent('td').addClass('active');
e.preventDefault();
});
.active a{
color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
</table>
Here is the solution. Use it according to your needs.

Related

How to remove HTML table row by value

Let's say there is a table:
<table id="tblPotrawySkladniki">
<tbody>
<tr><td>banana</td><td>10</td></tr>
<tr><td>orange</td><td>20</td></tr>
<tr><td>raspberry</td><td>20</td></tr>
</tbody>
</table>
I would like to remove entire row where i.e. cell1 = orange.
How can I do this using jquery?

Consider the following two examples. Example 1:
$(function() {
$("#tblPotrawySkladniki > tbody td").each(function(i, el) {
if ($(el).text() === "orange") {
$(el).parent().remove();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblPotrawySkladniki">
<tbody>
<tr>
<td>banana</td>
<td>10</td>
</tr>
<tr>
<td>orange</td>
<td>20</td>
</tr>
<tr>
<td>raspberry</td>
<td>20</td>
</tr>
</tbody>
</table>
This first example gives you more control over how you compare or seek out the cell. For example, you could use:
$(el).text().trim().toLowerCase() === "orange"
This would help ensure a case insensitive search.
Example 2:
$(function() {
$("#tblPotrawySkladniki > tbody td:contains('orange')").parent().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblPotrawySkladniki">
<tbody>
<tr>
<td>banana</td>
<td>10</td>
</tr>
<tr>
<td>orange</td>
<td>20</td>
</tr>
<tr>
<td>raspberry</td>
<td>20</td>
</tr>
</tbody>
</table>
The second example relies on the selector and if they do not match exactly, will not find it. It's quick and uses less lines, yet may not always find the needle.
Each of these, in their own way, will target the Cell and remove the parent Row. See More:
https://api.jquery.com/contains-selector/
https://api.jquery.com/text/
https://api.jquery.com/each/

Here is a dynamic way of doing it. For example, enter Orange or Raspberry into the input and click enter.
$(function() {
$("#inputSearch").on('change', function(){
var v = $(this).val();
$('#tblPotrawySkladniki tr td').filter(function() {
if ($(this).text() === v) {
return true;
}
}).parent().remove();
});
})
table {
margin: 0 auto;
}
tr {
border: 1px solid black;
}
tbody {
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="inputSearch">Search Value:</label>
<input type="text" name="inputSearch" id="inputSearch">
<table id="tblPotrawySkladniki">
<tbody>
<tr><td>banana</td><td>10</td></tr>
<tr><td>orange</td><td>20</td></tr>
<tr><td>raspberry</td><td>20</td></tr>
</tbody>
</table>

How to hover <td> that contain specific data

I need to display red background color in <td> that I hovered. For example, if I hovered 'Apple', then 'Apple' in all <td> shall be hovered same color as well. Currently can only hover one <td>Apple</td>.
table {
margin: 2rem;
}
th, td {
border: 1px solid #333;
}
td:hover{
background-color:red
}
html {
font-size: 24px;
}
<h3>Table 1</h3>
<table>
<tr>
<th>Header 1.1</th>
<th>Header 1.2</th>
<th>Header 1.3</th>
</tr>
<tr>
<td>Apple</td>
<td>Orange</td>
<td>Lemon</td>
</tr>
<tr>
<td>Orange</td>
<td>Lemon</td>
<td>Apple</td>
</tr>
</table>
Codepen

You can do that with the help of jQuery. Try running the following snippet.
$('.apple').hover(
function(){
$('.apple').css({"background":"red"});
},function(){
$('.apple').css({"background":"white"});
})
$('.orange').hover(
function(){
$('.orange').css({"background":"orange"});
}
,function(){
$('.orange').css({"background":"white"});
}
)
$('.lemon').hover(
function(){
$('.lemon').css({"background":"yellow"});
}, function(){
$('.lemon').css({"background":"white"});
})
html {
font-size: 24px;
}
table {
margin: 2rem;
}
th, td {
border: 1px solid #333;
}
td span {
display: block;
}
td:hover span.apple {
background-color:red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Table 1</h3>
<table>
<tr>
<th>Header 1.1</th>
<th>Header 1.2</th>
<th>Header 1.3</th>
</tr>
<tr>
<td><span class="apple">Apple</span></td>
<td><span class="orange">Orange</span></td>
<td><span class="lemon">Lemon</span></td>
</tr>
<tr>
<td><span class="orange">Orange</span></td>
<td><span class="lemon">Lemon</span></td>
<td><span class="apple">Apple</span></td>
</tr>
</table>

This cannot be done with just HTML and CSS as CSS is not aware of content.
Using Javascript you can set CSS variables that in turn will set the background of a cell.
This snippet goes through each td element and sets the style background: var(--name of fruit) so for example all apple cells have the style="background: var(--apple);" added to them. Then when a td is hovered the JS sets the --apple to red and when the mouse moves out it sets it to transparent.
That way all those tds with background: var(--apple) get highlighted.
There is no need to iterate through all the cells in the table each time a hover takes place, you can do it by setting everything up once at the start.
function setHighlight(e) {
table.style.setProperty('--' + e.target.textContent, 'red');
}
function removeHighlight(e) {
table.style.setProperty('--' + e.target.textContent, 'transparent');
}
const table = document.querySelector('table');
const tds = document.querySelectorAll('td');
tds.forEach(td => {
td.addEventListener('mouseover', setHighlight);
td.style.backgroundColor = 'var(--' + td.textContent + ')';
});
tds.forEach(td => {
td.addEventListener('mouseout', removeHighlight);
});
<h3>Table 1</h3>
<table>
<tr>
<th>Header 1.1</th>
<th>Header 1.2</th>
<th>Header 1.3</th>
</tr>
<tr>
<td>Apple</td>
<td>Orange</td>
<td>Lemon</td>
</tr>
<tr>
<td>Orange</td>
<td>Lemon</td>
<td>Apple</td>
</tr>
</table>

Add a class in every td and use JQuery.
See the example below.
$(document).ready(function(){
$("td.apple").hover(function(){
$(".apple").css("background-color", "red");
}, function(){
$(".apple").css("background-color", "white");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td class="apple">Apple</td>
<td class="apple">Apple</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td class="apple">Apple</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td class="apple">Apple</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>

If You don't want to add extra IDs and add jquery as dependency to Your code, You can use vanilla JS
// Get all TDs
const tds = Array.from(document.querySelectorAll("td"));
tds.map(td => {
// bind mouseenter to TDs to paint BG
td.addEventListener("mouseenter", (event) => {
const text = event.target.textContent;
// paint TDs with same text
tds.map(td => {
if(td.textContent === text) {
td.style.background = 'red';
}
});
});
// bind mouseleave to TDs to remove BG
td.addEventListener("mouseleave", (event) => {
tds.map(td => {
td.style.background = 'transparent';
});
})
});
Working example: https://codepen.io/ipasha/pen/eYRKxpP

table {
margin: 2rem;
}
th, td {
border: 1px solid #333;
}
.apple:hover{
background-color:red
}
html {
font-size: 24px;
}
<h3>Table 1</h3>
<table>
<tr>
<th>Header 1.1</th>
<th>Header 1.2</th>
<th>Header 1.3</th>
</tr>
<tr>
<td class="apple">Apple</td>
<td>Orange</td>
<td>Lemon</td>
</tr>
<tr>
<td>Orange</td>
<td>Lemon</td>
<td class="apple">Apple</td>
</tr>
</table>

This is one way you can try:
html {
font-size: 24px;
}
table {
margin: 2rem;
}
th, td {
border: 1px solid #333;
}
td span {
display: block;
}
td:hover span.apple {
background-color:red
}
<h3>Table 1</h3>
<table>
<tr>
<th>Header 1.1</th>
<th>Header 1.2</th>
<th>Header 1.3</th>
</tr>
<tr>
<td><span class="apple">Apple</span></td>
<td><span>Orange</span></td>
<td><span>Lemon</span></td>
</tr>
<tr>
<td><span>Orange</span></td>
<td><span>Lemon</span></td>
<td><span class="apple">Apple</span></td>
</tr>
</table>

JQuery class not being removed on data table on row click

I have created a JS Fiddle for the issue I am having using JQuery with datatables: https://jsfiddle.net/f3xme87n/
I have a checkbox column which allows users to select maximum 5 items at once. The user can then select a primary row which can only ever be one row at a time (highlighted in yellow). Currently when you uncheck a selected box it highlights the row to yellow which is not what I want it to do.
To replicate the bug:
Hold Cntrl and click 5 checkbox items (the maximum you can select) these should highlight in a light blue colour.
Now Click on a name of one of selected, the row goes yellow which is expected
Now click on another name the row goes yellow and the previous row goes back to normal colour
Now uncheck one of the boxes from what you have selected (not the current yellow one) - Keep hold of Cntrl
Bug: the row remains yellow but unchecked. I need this to go back to normal table row colour so shouldn't have the primary class applied to that row.
I can seem to figure out how to remove the primary class when you uncheck the box! Hopefully JS Fiddle and above replication details help with my question.
Issue lies in this part of the code in the JS:
if (this.classList.contains('selected')) {
var prevSelectedItem = document.querySelector('tr.primary');
if (prevSelectedItem != null) {
prevSelectedItem.classList.remove('primary');
}
this.classList.add("primary");
}
I need to ensure in the Javascript - The user can only set the colour of a row to yellow if it has already been selected (i.e. blue) Otherwise rows should not be able to go to yellow at all.
Additional info:
The way the checkbox is checked is via css ::before and ::after. How can I retrieve the CSS to know whether the before and after is applied in my as that is how I can determine whether the checkbox is ticked or not:
table.dataTable tbody td.select-checkbox:before, table.dataTable tbody th.select-checkbox:before {
content: '';
margin-top: -6px;
margin-left: -6px;
border: 1px solid black;
border-radius: 3px;
}
table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
content: '\2714';
margin-top: -11px;
margin-left: -4px;
text-align: center;
text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9;
}

You can check if the tr clicked has class selected depending on this add class or remove same from tr.
Demo Code :
$(document).ready(function() {
var table = $('#tabledt').DataTable({
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: [0]
}],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [
[1, 'asc']
],
bSortClasses: false
});
table.on('select', function(e, dt, type, ix) {
var selected = dt.rows({
selected: true
});
if (selected.count() > 5) {
dt.rows(ix).deselect();
}
//remove class...
$("tbody tr:not(.selected)").removeClass("primary")
});
//on click of tr
$(document).on("click", "#tabledt tr", function() {
if ($(this).hasClass("selected")) {
//check if slectd class length is > 1
if ($("tbody").find(".selected").length > 1) {
$(this).removeClass("primary") //remove that primary class
$("tbody tr.selected").removeClass("primary")
} else {
//add class
$(this).addClass("primary") //add primary
}
} else {
$(this).removeClass("primary") //remove that primary class
}
//just other way to remove class
$("tbody tr:not(.selected)").removeClass("primary")
})
});
table.dataTable th.selectall-checkbox,
table.dataTable td.selectall-checkbox {
cursor: pointer;
outline: none;
text-align: center;
}
.primary {
background-color: yellow !important;
}
.selected {
background-color: #acbad4;
}
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
<style>
table.dataTable th.selectall-checkbox,
table.dataTable td.selectall-checkbox {
cursor: pointer;
outline: none;
text-align: center;
}
.primary {
background-color: yellow !important;
}
.selected {
background-color: #acbad4;
}
</style>
<table id="tabledt" class="display" style="width:100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>$320,800</td>
</tr>
<tr>
<td></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>$170,750</td>
</tr>
<tr>
<td></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>$86,000</td>
</tr>
<tr>
<td></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>$433,060</td>
</tr>
<tr>
<td></td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>$162,700</td>
</tr>
<tr>
<td></td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>$372,000</td>
</tr>
<tr>
<td></td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>$137,500</td>
</tr>
<tr>
<td></td>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>$327,900</td>
</tr>
<tr>
<td></td>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>$237,500</td>
</tr>
<tr>
<td></td>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>$132,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
</table>

table.on("deselect", function (e, dt, type, ix) {
dt.rows(ix).nodes().to$().removeClass("primary");
});
if (
!e.target.className.includes("select-checkbox") &&
this.classList.contains("selected")
) {
var prevSelectedItem = document.querySelector("tr.primary");
if (prevSelectedItem != null) {
prevSelectedItem.classList.remove("primary");
}
this.classList.add("primary");
}

You just need to inhibit click handler when it comes from that checkbox:
table.rows[i].onclick = function ({originalTarget:ot}) {
if($(ot).hasCElass("select-checkbox")) return;
/* ... */
};
Edit:
Answering your comment: If I understood your intention well, that jsfiddle works to me.
Maybe you're trying from an old browser not supporting destructuring.
Try this instead:
table.rows[i].onclick = function (ev) {
if($(ev.originalTarget).hasCElass("select-checkbox")) return;
/* ... */
};
orininalTarget is a property of passed-in event object that points to the actual DOM element that received the click (even if, like in your case, you were listening on an outer one that contains it).

How to create a table with a scrollable body without a fixed height

I'm trying to create an html table with a scrollable body so that you can always see the header. I want the table to be inside a div, and have a max height of 100% of the div height. The table items are dynamically generated, so if there are too many items, you will get the scrollbar on the body. But if there are very few items, I want the table to shrink and not use the full height of the div.
I can set the height of the table to 100%, and set the display for tbody to block and give it a max height of 100%. The problem with this is even if there are no items, the table body still uses the full height to show a blank table.
I can set some fixed max-height for tbody, and set height for the table to auto. This way the table shrinks when there are few items instead of showing a blank body. The problem with this is the height is not being controlled by the div anymore.
html:
<div>
<table>
<thead>
<tr>
<th > col1</th>
<th> col 2</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
css
tbody{
display: block;
max-height: 100%;
overflow: auto;
}
table{
height: 100%;
border: 1px solid black;
}
div{
height: 300px;
}

Use DataTable for this problem. Here is the demo:
$(document).ready(function() {
$('#example').DataTable({
"scrollY": 100,
"scrollX": true
});
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon#datatables.net</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
<td>g.winters#datatables.net</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>1562</td>
<td>a.cox#datatables.net</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
<td>6224</td>
<td>c.kelly#datatables.net</td>
</tr>
<tr>
<td>Airi</td>
<td>Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
<td>5407</td>
<td>a.satou#datatables.net</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>1562</td>
<td>a.cox#datatables.net</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
<td>6224</td>
<td>c.kelly#datatables.net</td>
</tr>
<tr>
<td>Airi</td>
<td>Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
<td>5407</td>
<td>a.satou#datatables.net</td>
</tr>
</tbody>
</table>
Here is the details: https://datatables.net/examples/basic_init/scroll_xy.html

Semantic UI - Keep thead visible when scrolling tbody

I'm trying to figure out how to keep the table head visible when scrolling. Is there a setting in semantic ui for this? Or will I just have to use a non-semantic ui solution?
You'll need to view "Full page" to see the table correctly.
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.css" rel="stylesheet" />
<div style="height:200px;overflow:auto">
<table class="ui small celled striped table" sytle="width:100%">
<thead>
<tr>
<th>Date</th>
<th>Status</th>
<th>Facility Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody data-bind="foreach:FollowupEntries">
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
</tbody>
</table>
</div>

I solved the problem with position: sticky, like this:
.ui.table thead tr:first-child > th {
position: sticky !important;
top: 0;
z-index: 2;
}

As #Stewartside suggested, this isn't current built into Semantic UI, but it has been discussed.

Though I don't recommend it if you really really want it to work even with hacks this should work for you:
<table class="semantic's class" style="margin-bottom:0px;border-bottom:none">
<thead>...</thead>
</table>
<table class="semantic's class" style="margin-top:0px; border-top: none">
<div style="overflow-y:scroll; height: YOUR-REQUIRED-HEIGHT">
<thead style="visible:hidden">...</thead>
<tbody>...</tbody>
</div>
</table>

This script will probably do the job for you. Just add the class "sticky" to your table tag and adjust the offset from the top:
$(document).ready(function(){
var tableTop = $('.sticky.table').offset().top;
$('.sticky.table').children('thead').children('tr').children('th').each( function() {
$(this).css({ width: $(this).outerWidth() });
});
$(window).scroll(function() {
var fromTop = $(window).scrollTop();
if($('.sticky.table').length > 0){
stickyTableHead(fromTop);
}
});
function stickyTableHead(fromTop){
if(fromTop > tableTop ){
$('.sticky.table').children('thead').css({'position': 'fixed', top: 0 });
}else{
$('.sticky.table').children('thead').css({'position': 'relative', top: 0});
}
};
});

Applying Ashkan's solution to any table.
table{
width:100%;
}
table,th,td{
border: 1px solid grey;
border-collapse: collapse;
}
thead {
background-color: grey;
position: sticky !important;
top: 0;
z-index: 2;
}
<div style="overflow: auto; height:100px;">
<table>
<thead>
<tr>
<th>ID</th>
<th>ONE</th>
<th>TWO</th>
<th>THREE</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>A</td><td>B</td><td>C</td>
</tr>
<tr>
<td>2</td><td>D</td><td>E</td><td>F</td>
</tr>
<tr>
<td>3</td><td>G</td><td>H</td><td>I</td>
</tr>
<tr>
<td>4</td><td>J</td><td>K</td><td>L</td>
</tr>
<tr>
<td>5</td><td>M</td><td>N</td><td>O</td>
</tr>
<tr>
<td>6</td><td>P</td><td>Q</td><td>R</td>
</tr>
<tr>
<td>7</td><td>S</td><td>T</td><td>U</td>
</tr>
<tr>
<td>8</td><td>V</td><td>W</td><td>X</td>
</tr>
<tr>
<td>9</td><td>Y</td><td>Z</td><td>0</td>
</tr>
</tbody>
</table>
</div>

Check out this JSFiddle, I think it is the kind of thing you're looking for.. specifically check out the CSS for the thead tag.
thead {
position: fixed;
top: 0;
left: 0;
background-color: white;
}