Adding scroll bars to 2 tables - javascript

I am trying to display 2 individual scroll bars for 2 tables wrapped inside a div.
My code is as follows
<html>
<body>
<div style="width:300px;background:#00CC33;height:100px;">
<div style="width:150px;float:left;">
<table width="100px" border="1">
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr><tr>
<td>100</td>
</tr><tr>
<td>100</td>
</tr>
</table>
</div>
<div style="width:100px;float:left;">
<table width="100px" border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
</div>
</body>
</html>
What I tried: I tried to use overflow:scroll; but when I am doing so both the tables are getting wrapped in one scroll bar.
Above mentioned tables are dynamically generated.
demo: http://jsfiddle.net/HLyDq/


Add the following Styles to the two table-parent divs:
<div style="...;overflow-y:auto;max-height:100px;">
JsFiddle: http://jsfiddle.net/gQyYe/


You have to specify the height:100px and the overflow:auto styles to the DIV which is the immediate parent of each Table.
Here is the corrected code
<html>
<body>
**<div style="width:300px;background:#00CC33;height:100px;">
<div style="width:150px;float:left;height:100px;overflow:auto;">**
<table width="100px" border="1">
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr><tr>
<td>100</td>
</tr><tr>
<td>100</td>
</tr>
</table>
</div>
**<div style="width:100px;float:left;height:100px;overflow:auto;">**
<table width="100px" border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
</div>
</body>
</html>
The code enclosed between a pair of ** are the corrected lines. Check this JSFiddle - http://jsfiddle.net/yYxuN/1/
Hope this helps


there's an answer here that can be helpful - I hope.
I'd prefer overflow:auto;in any case

Related

Nested table with data tables

I have the following nested HTML table. I am using the Datatables API to make my tables searchable. One problem I have faced is with the nested tables I'm not sure how to make the nested tables searchable? I have tried adding additional ID tags to the nested tables HTML code and adding that into the dataTables JS code call but that did not work. Any idea how to make the sub-tables searchable?
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
<div class="container">
<table id="example" class="table table-striped">
<thead>
<tr>
<th>Image</th>
<th>Date</th>
<th>TC NAME</th>
<th>NS FLOW</th>
<th>SN FLOW</th>
<th>NS FLOW</th>
<th>SN FLOW</th>
<th>NS FLOW</th>
<th>SN FLOW</th>
</tr>
</thead>
<tbody>
<tr>
<td>721</td>
<td>3/15/20</td>
<td>
<table id="example1" class="table table-nostriped">
<tr>
<td>TC1</td>
</tr>
<tr>
<td>TC2</td>
</tr>
<tr>
<td>TC3</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>600</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>800</td>
</tr>
<tr>
<td>400</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>722</td>
<td>3/16/20</td>
<td>
<table class="table table-nostriped">
<tr>
<td>TC1</td>
</tr>
<tr>
<td>TC2</td>
</tr>
<tr>
<td>TC3</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>600</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>800</td>
</tr>
<tr>
<td>400</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>633</td>
<td>3/17/20</td>
<td>
<table class="table table-nostriped">
<tr>
<td>TC1</td>
</tr>
<tr>
<td>TC2</td>
</tr>
<tr>
<td>TC3</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>300</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>600</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>800</td>
</tr>
<tr>
<td>400</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>

If you by "searchable" mean DataTables inside DataTables you can use the createdRow callback to initialize tables inside a <tr>'s columns.
You must have a columns section in order to compensate for the missing <thead> in the nested tables (avoiding the TypeError: col is undefined error) :
const columns = [
{ title: '' },
]
Init the nested tables in the createdRow callback:
let table = $('#example').DataTable({
createdRow: function(row) {
$(row).find('td table')
.DataTable({
columns: columns,
dom: 'tf'
})
}
})
Notice the dom section. Here only showing the table itself and the filter box. You
can remove the header with
table.dataTable td table thead {
display: none;
}
Dont add this CSS if you want sortable columns in the nested tables.
demo using the markup in question -> http://jsfiddle.net/davidkonrad/8pzkr6yn/
Update. If your concern just is to be able to search within the content of the nested tables (e.g the HTML markup scraped away) just define the relevant columns type as 'html' (https://datatables.net/reference/option/columns.type) :
let table = $('#example').DataTable({
columnDefs: [
{ targets: [2,3,4,5,6,7], type: 'html' },
],
...
})

How to hide the specific tr:nth-child(6) based on the content of a tr:nth-child(7) > td:nth-child(2)

I would like to hide with javascript a specific child :
#table-detail > tbody > tr:nth-child(10)
based on the content of another specific preceding child :
#table-detail > tbody > tr:nth-child(7) > td:nth-child(2)
I can hide the child as followed :
$('#table-detail > tbody > tr:nth-child(10)').css('display', 'none');
but I have no clue how to check the content of the preceding child (if child element
#table-detail > tbody > tr:nth-child(7) > td:nth-child(2)" content == 'Tarte-fine
then hide child element X.
Please find hereafter the table :
<table id="table-detail" class="table table-striped">
<tbody>
<tr>
<td># Commande</td>
<td>26</td>
</tr>
<tr>
<td>Statut Commande</td>
<td>Non traitée</td>
</tr>
<tr>
<td>Statut Laboratoire</td>
<td>Assignée</td>
</tr>
<tr>
<td>Nom</td>
<td>Client Deux</td>
</tr>
<tr>
<td>Nature</td>
<td>Client Mage</td>
</tr>
<tr>
<td>Date Retrait</td>
<td></td>
</tr>
<tr>
<td>Catégorie</td>
<td>Tarte-fine</td> <-CONTENT TO CHECK IN THIS CHILD ELEMENT
</tr>
<tr>
<td>Produit</td>
<td>Abricots</td>
</tr>
<tr>
<td># Personnes</td>
<td>10</td>
</tr>
<tr> <- CHILD ELEMENT TO HIDE
<td>Taille (cm)</td>
<td>16</td>
</tr>
<tr>
<td>Inscription</td>
<td></td>
</tr>
<tr>
<td>Décoration petites fleurs</td>
<td>undefined</td>
</tr>
<tr>
<td>Décoration Chocolat et fruits</td>
<td>undefined</td>
</tr>
<tr>
<td>Nombre de sandwiches</td>
<td></td>
</tr>
<tr>
<td>Poids</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 1</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 2</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 3</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 4</td>
<td></td>
</tr>
<tr>
<td>Couleur du ruban</td>
<td></td>
</tr>
<tr>
<td>Prix</td>
<td>58</td>
</tr>
<tr>
<td>Total</td>
<td>0</td>
</tr>
</tbody>

You need to use :contains() selector that select element has special text content.
$('#table-detail > tbody > tr:nth-child(7) > td:nth-child(2):contains("Tarte-fine")').css('display', 'none');
Also you can simplify the code and use :eq() selector instead of :nth-child
$('#table-detail tr:eq(6) td:eq(1):contains("Tarte-fine")').css('display', 'none');
$('#table-detail > tbody > tr:nth-child(7) > td:nth-child(2):contains("Tarte-fine")').css('color', 'red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-detail" class="table table-striped">
<tbody>
<tr>
<td># Commande</td>
<td>26</td>
</tr>
<tr>
<td>Statut Commande</td>
<td>Non traitée</td>
</tr>
<tr>
<td>Statut Laboratoire</td>
<td>Assignée</td>
</tr>
<tr>
<td>Nom</td>
<td>Client Deux</td>
</tr>
<tr>
<td>Nature</td>
<td>Client Mage</td>
</tr>
<tr>
<td>Date Retrait</td>
<td></td>
</tr>
<tr>
<td>Catégorie</td>
<td>Tarte-fine</td> <!-- CONTENT TO CHECK IN THIS CHILD ELEMENT -->
</tr>
<tr>
<td>Produit</td>
<td>Abricots</td>
</tr>
<tr>
<td># Personnes</td>
<td>10</td>
</tr>
<tr> <!-- CHILD ELEMENT TO HIDE -->
<td>Taille (cm)</td>
<td>16</td>
</tr>
<tr>
<td>Inscription</td>
<td></td>
</tr>
<tr>
<td>Décoration petites fleurs</td>
<td>undefined</td>
</tr>
<tr>
<td>Décoration Chocolat et fruits</td>
<td>undefined</td>
</tr>
<tr>
<td>Nombre de sandwiches</td>
<td></td>
</tr>
<tr>
<td>Poids</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 1</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 2</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 3</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 4</td>
<td></td>
</tr>
<tr>
<td>Couleur du ruban</td>
<td></td>
</tr>
<tr>
<td>Prix</td>
<td>58</td>
</tr>
<tr>
<td>Total</td>
<td>0</td>
</tr>
</tbody>
</table>
Note that :contain() return unwanted result in some case, so you can use .filter() instead
$('#table-detail tr:eq(6) td:eq(1)').filter(function(){
return $(this).text() == "Tarte-fine";
}).css('display', 'none');

You could check if that cell contains the specific text using :contains and hide that other cell using hide():
$(function() {
var found = $("#table-detail > tbody > tr:nth-child(7) > td:nth-child(2):contains(Tarte-fine)").length > 0;
if (found) {
$("#table-detail > tbody > tr:nth-child(10)").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-detail" class="table table-striped">
<tbody>
<tr>
<td># Commande</td>
<td>26</td>
</tr>
<tr>
<td>Statut Commande</td>
<td>Non traitée</td>
</tr>
<tr>
<td>Statut Laboratoire</td>
<td>Assignée</td>
</tr>
<tr>
<td>Nom</td>
<td>Client Deux</td>
</tr>
<tr>
<td>Nature</td>
<td>Client Mage</td>
</tr>
<tr>
<td>Date Retrait</td>
<td></td>
</tr>
<tr>
<td>Catégorie</td>
<td>Tarte-fine</td>
<!-- CONTENT TO CHECK IN THIS CHILD ELEMENT -->
</tr>
<tr>
<td>Produit</td>
<td>Abricots</td>
</tr>
<tr>
<td># Personnes</td>
<td>10</td>
</tr>
<tr>
<!-- CHILD ELEMENT TO HIDE -->
<td>Taille (cm)</td>
<td>16</td>
</tr>
<tr>
<td>Inscription</td>
<td></td>
</tr>
<tr>
<td>Décoration petites fleurs</td>
<td>undefined</td>
</tr>
<tr>
<td>Décoration Chocolat et fruits</td>
<td>undefined</td>
</tr>
<tr>
<td>Nombre de sandwiches</td>
<td></td>
</tr>
<tr>
<td>Poids</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 1</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 2</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 3</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 4</td>
<td></td>
</tr>
<tr>
<td>Couleur du ruban</td>
<td></td>
</tr>
<tr>
<td>Prix</td>
<td>58</td>
</tr>
<tr>
<td>Total</td>
<td>0</td>
</tr>
</tbody>
</table>

As an alternative this is the code to do what you need without using jquery.
This is by the way a more solid solution since you don't need to know the numerical order of both of the rows that contain the cell you want to check and the cell you want to hide.
const rows = document.getElementsByTagName('tr');
let textToCheck = 'Tarte-fine';
let childTextOfTheElementToHide = 'Taille (cm)';
let check = Object.keys(rows).filter(key => {
return rows[key].children[1].innerHTML === textToCheck
});
if(check.length > 0){
let hide = Object.keys(rows).filter(key => {
return rows[key].children[0].innerHTML === childTextOfTheElementToHide
});
rows[hide].style.display = 'none';
}

How to find value in row of table using jquery or javascript?

i want to find value in row of table. Sample , i have a this case
$("tr[id*='row']").each(function (i, el) {
//if($this.value() >10)
//console.log('This value in cell is: ' + this.value);
});
<div id='div1'>
<table border='2px'>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>7</td>
<td>8</td>
</tr>
</table>
<table border='2px'>
<tr id='row' style="background-color:yellow; color:red">
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>13</td>
<td>14</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>15</td>
<td>16</td>
</tr>
</table>
</div>
In this case above , i want to compare and show the value in cell, which more than 10, but i confused in define the value in cell. Mabe you can give me adviced for this case .

Use find for td values.
$("tr[id*='row']").find('td').each(function(i, el) {
var val = $(this).text();
if (val > 10)
console.log('This value in cell is: ' + $(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div1'>
<table border='2px'>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>7</td>
<td>8</td>
</tr>
</table>
<table border='2px'>
<tr id='row' style="background-color:yellow; color:red">
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>13</td>
<td>14</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>15</td>
<td>16</td>
</tr>
</table>
</div>

$(document).ready(function(){
$("tr[id*='row']").each(function () {
var td = $(this).find("td");
var countdeeptd = td.length;
td.each(function(i,el){
if(td.eq(i).text() > 10)
console.log('This value in cell is: ', td.eq(i).text());
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div1'>
<table border='2px'>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>7</td>
<td>8</td>
</tr>
</table>
<table border='2px'>
<tr id='row' style="background-color:yellow; color:red">
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>13</td>
<td>14</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>15</td>
<td>16</td>
</tr>
</table>
</div>

Want to repeat my table header of my html page on each page while printing or by exporting to Pdf by any way

Want to repeat my table header of my html page on each page while print preview or by exporting to Pdf by any way. The data in table will not be static it may change dynamically in each td.
I know similar question has been asked here. But didn't found any answer at last for the dynamic data.
<table >
<thead>
<tr >
<th>Month</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>February</td>
<td>2015</td>
</tr>
<tr>
<td>March</td>
<td>2015</td>
</tr>
<tr>
<td>April</td>
<td>2015</td>
</tr>
<tr>
<td>May</td>
<td>2015</td>
</tr>
<tr>
<td>June</td>
<td>2015</td>
</tr>
<tr>
<td>July</td>
<td>2015</td>
</tr>
<tr>
<td>August</td>
<td>2015</td>
</tr>
<tr>
<td>September</td>
<td>2015</td>
</tr>
<tr>
<td>October</td>
<td>2015</td>
</tr>
<tr>
<td>November</td>
<td>2015</td>
</tr>
<tr>
<td>February</td>
<td>2015</td>
</tr>
<tr>
<td>March</td>
<td>2015</td>
</tr>
<tr>
<td>April</td>
<td>2015</td>
</tr>
<tr>
<td>May</td>
<td>2015</td>
</tr>
<tr>
<td>June</td>
<td>2015</td>
</tr>
<tr>
<td>July</td>
<td>2015</td>
</tr>
<tr>
<td>August</td>
<td>2015</td>
</tr>
<tr>
<td>September</td>
<td>2015</td>
</tr>
<tr>
<td>October</td>
<td>2015</td>
</tr>
<tr>
<td>November</td>
<td>2015</td>
</tr>
<tr>
<td>February</td>
<td>2015</td>
</tr>
<tr>
<td>March</td>
<td>2015</td>
</tr>
<tr>
<td>April</td>
<td>2015</td>
</tr>
<tr>
<td>May</td>
<td>2015</td>
</tr>
<tr>
<td>June</td>
<td>2015</td>
</tr>
<tr>
<td>July</td>
<td>2015</td>
</tr>
<tr>
<td>August</td>
<td>2015</td>
</tr>
<tr>
<td>September</td>
<td>2015</td>
</tr>
<tr>
<td>October</td>
<td>2015</td>
</tr>
<tr>
<td>November</td>
<td>2015</td>
</tr>
<tr >
<td>December</td>
<td>2015</td>
</tr>
<tr>
<td>January</td>
<td>2016</td>
</tr>
<tr>
<td>February</td>
<td>2016</td>
</tr>
<tr>
<td>March</td>
<td>2016</td>
</tr>
<tr>
<td>April</td>
<td>2016</td>
</tr>
<tr>
<td>May</td>
<td>2016</td>
</tr>
<tr>
<td>June</td>
<td>2016</td>
</tr>
<tr>
<td>July</td>
<td>2016</td>
</tr>
<tr>
<td>August</td>
<td>2016</td>
</tr>
<tr>
<td>September</td>
<td>2016</td>
</tr>
<tr>
<td>October</td>
<td>2016</td>
</tr>
<tr>
<td>November</td>
<td>2016</td>
</tr>
<tr >
<td>December</td>
<td>2016</td>
</tr>
<tr>
<td>January</td>
<td>2017</td>
</tr>
<tr>
<td>February</td>
<td>2017</td>
</tr>
<tr>
<td>March</td>
<td>2017</td>
</tr>
<tr>
<td>April</td>
<td>2017</td>
</tr>
<tr>
<td>May</td>
<td>2017</td>
</tr>
<tr>
<td>June</td>
<td>2017</td>
</tr>
<tr>
<td>July</td>
<td>2017</td>
</tr>
<tr>
<td>August</td>
<td>2017</td>
</tr>
<tr>
<td>September</td>
<td>2017</td>
</tr>
<tr>
<td>October</td>
<td>2017</td>
</tr>
<tr>
<td>November</td>
<td>2017</td>
</tr>
<tr >
<td>December</td>
<td>2017</td>
</tr>
<tr >
<td>January</td>
<td>2018</td>
</tr>
<tr>
<td>February</td>
<td>2018</td>
</tr>
<tr>
<td>March</td>
<td>2018</td>
</tr>
<tr>
<td>April</td>
<td>2018</td>
</tr>
<tr>
<td>May</td>
<td>2018</td>
</tr>
<tr>
<td>June</td>
<td>2018</td>
</tr>
<tr>
<td>July</td>
<td>2018</td>
</tr>
<tr>
<td>August</td>
<td>2018</td>
</tr>
<tr>
<td>September</td>
<td>2018</td>
</tr>
<tr>
<td>October</td>
<td>2018</td>
</tr>
<tr>
<td>November</td>
<td>2018</td>
</tr>
<tr >
<td>December</td>
<td>2018</td>
</tr>
</tbody>
</table>

Sticky subheaders in a scrolling table with a fixed head

I'm trying to create a table with a fixed header, where the body scrolls under the head - which is fine, and there's lots of great examples out there.
The complication is that I want to be able to have sticky subheaders that scroll with the rest of the table, until they hit the table header, and then don't move until the rest of the section has scrolled underneath them, at which point they're replaced by the next sticky subheader (a little like the iphone address book). An example of how I need it to look: Getting a sticky header to "push up", like in Instagram's iPhone app using CSS and jQuery
The example above isn't done with a table, and i have a lot of tabular data I need to show, so it will need to be a table.
I've not been able to find an example of this working so far and everything I've tried has failed miserably. I've included a link to a jsfiddle example that doesn't have any fixed heads etc, as I thought it would avoid conflicts with other solutions: https://jsfiddle.net/q7zLhus0/
<table>
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</thead>
<tbody>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 1</th>
</tr>
<tr>
<td>1</td>
<td>6</td>
<td>3</td>
<td>6</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>5</td>
<td>7</td>
<td>2</td>
<td>5</td>
</tr>
<tr>
<td>S</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>5</td>
<td>3</td>
<td>7</td>
<td>9</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 2</th>
</tr>
<tr>
<td>A</td>
<td>5</td>
<td>3</td>
<td>H</td>
<td>D</td>
</tr>
<tr>
<td>Q</td>
<td>R</td>
<td>T</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>6</td>
<td>4</td>
<td>W</td>
<td>2</td>
<td>6</td>
</tr>
<tr>
<td>5</td>
<td>3</td>
<td>W</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 3</th>
</tr>
<tr>
<td>1</td>
<td>9</td>
<td>E</td>
<td>3</td>
<td>S</td>
</tr>
<tr>
<td>T</td>
<td>4</td>
<td>D</td>
<td>H</td>
<td>S</td>
</tr>
<tr>
<td>4</td>
<td>S</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
<td>R</td>
<td>7</td>
<td>S</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 4</th>
</tr>
<tr>
<td>5</td>
<td>D</td>
<td>S</td>
<td>6</td>
<td>S</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>J</td>
</tr>
<tr>
<td>6</td>
<td>S</td>
<td>D</td>
<td>F</td>
<td>3</td>
</tr>
<tr>
<td>F</td>
<td>L</td>
<td>P</td>
<td>T</td>
<td>D</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 5</th>
</tr>
<tr>
<td>5</td>
<td>D</td>
<td>S</td>
<td>6</td>
<td>S</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>J</td>
</tr>
<tr>
<td>6</td>
<td>S</td>
<td>D</td>
<td>F</td>
<td>3</td>
</tr>
<tr>
<td>F</td>
<td>L</td>
<td>P</td>
<td>T</td>
<td>D</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 6</th>
</tr>
<tr>
<td>5</td>
<td>D</td>
<td>S</td>
<td>6</td>
<td>S</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>J</td>
</tr>
<tr>
<td>6</td>
<td>S</td>
<td>D</td>
<td>F</td>
<td>3</td>
</tr>
<tr>
<td>F</td>
<td>L</td>
<td>P</td>
<td>T</td>
<td>D</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 7</th>
</tr>
<tr>
<td>5</td>
<td>D</td>
<td>S</td>
<td>6</td>
<td>S</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>J</td>
</tr>
<tr>
<td>6</td>
<td>S</td>
<td>D</td>
<td>F</td>
<td>3</td>
</tr>
<tr>
<td>F</td>
<td>L</td>
<td>P</td>
<td>T</td>
<td>D</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 8</th>
</tr>
<tr>
<td>5</td>
<td>D</td>
<td>S</td>
<td>6</td>
<td>S</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>J</td>
</tr>
<tr>
<td>6</td>
<td>S</td>
<td>D</td>
<td>F</td>
<td>3</td>
</tr>
<tr>
<td>F</td>
<td>L</td>
<td>P</td>
<td>T</td>
<td>D</td>
</tr>
</tbody>
Any help would be greatly appreciated. This one has really stumped me.

Add This Function
function stickyTitles(stickies) {
var thisObj = this;
thisObj.load = function () {
stickies.each(function () {
var thisSticky = jQuery(this).append('<span class="test" />');
thisSticky.parent().height(thisSticky.outerHeight());
jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);
});
jQuery(window).off("scroll.stickies").on("scroll.stickies", function () {
thisObj.scroll();
});
}
thisObj.scroll = function () {
stickies.each(function (i) {
var thisSticky = jQuery(this),
nextSticky = stickies.eq(i + 1),
prevSticky = stickies.eq(i - 1),
pos = jQuery.data(thisSticky[0], 'pos');
if (pos <= jQuery(window).scrollTop()) {
thisSticky.addClass("fixed");
if (nextSticky.length > 0 && thisSticky.offset().top >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {
thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight());
}
} else {
thisSticky.removeClass("fixed");
if (prevSticky.length > 0 && jQuery(window).scrollTop() <= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) {
prevSticky.removeClass("absolute").removeAttr("style");
}
}
});
}
}
jQuery(document).ready(function () {
new stickyTitles(jQuery(".subheader")).load();
});
Demo Link -https://jsfiddle.net/kjo9w57a/1/

Categories