Develop Reference

Table with horizontal and vertical scroll with fixed header

I do have a table with horizontal and vertical scroll with a fixed header with elements taking as much as space it needs. I am working with React. It would be awesome if there is a react based solution too if CSS alone cannot solve it.
Note:
I did try other solutions here but it is not what I'm looking for
It would be better if td can have min-width set on them too
The header shows menu when it is clicked for sorting and filtering

There's a simple CSS solution to fix rows(headers) and columns in a table.
th {
position: sticky:
top: 0;
}
The above snippet will fix the header to the top. Then it's just a matter of adding a simple overflow to the parent container of the table. You can find a simple example below -
.table-container {
overflow: auto;
max-height: 160px;
border: 1px solid red;
}
th {
position: sticky;
top: 0;
background: white;
}
<div class="table-container">
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>

Modify existing jQuery table sort+filter functions (child rows)

Ok so I have this jQuery table function (https://jsfiddle.net/51Le6o06/7/) which works perfectly with multiple tables on the same page.
I want to modify the table and functions (new fiddle https://jsfiddle.net/51Le6o06/16/) so that each row (.product-data-row) carries an information row (.product-information-row) [child row] as you can see in this fiddle.
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£364.00 upfront</span>
<br><span class="amount">£10.10 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£364.00 upfront<br>£10.10 per month</td>
</tr>
Each (.product-data-row) now has a (.product-information-row) directly under it which carries information about (.product-data-row) for now in the example above it just contains duplicate information.
Carrying over the existing jQuery function/s from the earlier table/s functions the on page load function should - sort the table rows on page load by searching for the class (.amount) then rearranging the rows in ascending order so the cheapest deal (per month) is first. Which is no longer working.
There is also a filter that filters the table rows (carried over from previous table) by showing rows with class (.free) only - this is also wrong because I would like the information rows to be shown alongside the rows containing (.free).
Each (.product-information-row) is specific to it's (.product-data-row) directly above. How can I modify the jQuery to accommodate for this. And make the table function as it's predecessor does with the extra information row.
What i'm trying to do here is have hidden data for a table row which will eventually be displayed upon clicking the table row and slide downwards eventually but I can't seem to make it work sort of a child row which DataTables uses, if anyone has any alternative methods of doing this or ideas please let me know in the comments.
jQuery from predecessor (Needs Modifying to Work)
jQuery.fn.extend({
sortPaging: function() {
return this.each(function() {
var container = $(this);
var dataRows = [];
/**
* Create an array of all rows with its value (this assumes that the amount is always a number.
* You should add error checking!!
* Also assumes that all rows are data rows, and that there are no header rows. Adjust selector appropriately.
*/
container.find('.internalActivities > tbody > tr').each(function(i, j) {
dataRows.push({
'amount': parseFloat($(this).find('.amount').text().replace(/£/, "")),
'row': $(this)
});
})
//Sort the data smallest to largest
dataRows.sort(function(a, b) {
return a.amount - b.amount;
});
//Remove existing table rows. This assumes that everything should be deleted, adjust selector if needed :).
container.find('.internalActivities > tbody').empty();
//Add rows back to table in the correct order.
dataRows.forEach(function(ele) {
container.find('.internalActivities > tbody').append(ele.row);
})
var trs = container.find(".internalActivities tbody tr");
var btnMore = container.find(".seeMoreRecords");
var btnLess = container.find(".seeLessRecords");
var trsLength = trs.length;
var currentIndex = 4,
page = 4;
trs.hide();
trs.slice(0, currentIndex).show();
checkButton();
btnMore.click(function(e) {
e.preventDefault();
trs.slice(currentIndex, currentIndex + page).show();
currentIndex += page;
checkButton();
});
btnLess.click(function(e) {
e.preventDefault();
trs.slice(currentIndex - page, currentIndex).hide();
currentIndex -= page;
checkButton();
});
function checkButton() {
var currentLength = trs.filter("tr:visible").length;
if (currentLength >= trsLength) {
btnMore.hide();
} else {
btnMore.show();
}
if (trsLength > page && currentLength > page) {
btnLess.show();
} else {
btnLess.hide();
}
}
container.find('.filter-free').change(function() {
var $all = container.find(".internalActivities tbody tr").hide();
trs = this.checked ? $all.has('.free') : $all;
trsLength = trs.length;
trs.slice(0, page).show();
currentIndex = page;
});
container.find('.filter-free').click(function() {
container.find('.seeLessRecords').hide();
});
})
}
});
$('.sort_paging').sortPaging();
HTML
<h1>Table sorting on page load with paging</h1>
<div class="sort_paging">
<p>
<input type="checkbox" class="filter-free" /> Free Handset
</p>
<table class="internalActivities">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
</thead>
<tbody>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£364.00 upfront</span>
<br><span class="amount">£10.10 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£364.00 upfront<br>£10.10 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£40.40 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.40 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£30.30 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£30.30 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£16.04 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.04 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£134.00 upfront</span>
<br><span class="amount">£12.19 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£134.00 upfront
<br>£12.19 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£120.00 upfront</span>
<br><span class="amount">£14.22 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£120.00 upfront
<br>£14.22 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£50.22 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.22 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£10.33 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£10.33 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£40.45 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.45 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£200.00 upfront</span>
<br><span class="amount">£30.84 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£200.00 upfront
<br>£30.84 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£16.14 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.14 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£12.10 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£12.10 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£14.02 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£14.02 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£50.88 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.88 per month</td>
</tr>
</tbody>
</table>
<input type="button" class="seeMoreRecords" value="More">
<input type="button" class="seeLessRecords" value="Less">
</div>
<h2>Second table below</h2>
<div class="sort_paging">
<p>
<input type="checkbox" class="filter-free" /> Free Handset
</p>
<table class="internalActivities">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
</thead>
<tbody>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£364.00 upfront</span>
<br><span class="amount">£10.10 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£364.00 upfront<br>£10.10 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£40.40 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.40 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£30.30 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£30.30 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£16.04 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.04 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£134.00 upfront</span>
<br><span class="amount">£12.19 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£134.00 upfront
<br>£12.19 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£120.00 upfront</span>
<br><span class="amount">£14.22 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£120.00 upfront
<br>£14.22 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£50.22 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.22 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£10.33 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£10.33 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£40.45 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.45 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£200.00 upfront</span>
<br><span class="amount">£30.84 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£200.00 upfront
<br>£30.84 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£16.14 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.14 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£12.10 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£12.10 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£14.02 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£14.02 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£50.88 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.88 per month</td>
</tr>
</tbody>
</table>
<input type="button" class="seeMoreRecords" value="More">
<input type="button" class="seeLessRecords" value="Less">
</div>

There are lot of open issues in your code, so quick fix took more than hour. Try to go through the code below, hope you will get some ideas (and please next time try to be more accurate with questions, maybe divide it into several questions in order to get quick and concise answers):
jQuery.fn.sortPaging = function(options) {
var defaults = {
pageRows: 2
};
var settings = $.extend(true, defaults, options);
return this.each(function() {
var container = $(this);
var tableBody = container.find('.internalActivities > tbody');
var dataRows = [];
var currentPage = 1;
var maxPages = 1;
var buttonMore = container.find('.seeMoreRecords');
var buttonLess = container.find('.seeLessRecords');
var buttonFree = container.find('.filter-free');
var tableRows = [];
var maxFree = 0;
var filterFree = buttonFree.is(':checked');
function displayRows() {
tableBody.empty();
var displayed = 0;
$.each(dataRows, function(i, ele) {
if( !filterFree || (filterFree && ele.isFree) ) {
tableBody.append(ele.thisRow).append(ele.nextRow);
displayed++;
if( displayed >= currentPage*settings.pageRows ) {
return false;
};
};
});
tableBody.find('.product-data-row').on('click', function(e){
$(this).next().toggle();
});
};
function checkButtons() {
buttonLess.toggleClass('element_invisible', currentPage<=1);
buttonMore.toggleClass('element_invisible', filterFree ? currentPage>=maxFreePages : currentPage>=maxPages);
};
function showMore() {
currentPage++;
displayRows();
checkButtons();
};
function showLess() {
currentPage--;
displayRows();
checkButtons();
};
function changedFree() {
filterFree = buttonFree.is(':checked');
if( filterFree && currentPage>maxFreePages ) {
currentPage=maxFreePages;
};
displayRows();
checkButtons();
};
tableBody.find('.product-data-row').each(function(i, j) {
var thisRow = $(this);
var nextRow = thisRow.next();
var amount = parseFloat(thisRow.find('.amount').text().replace(/£/, ''));
var isFree = thisRow.find('.free').length;
maxFree += isFree;
dataRows.push({
amount: amount,
thisRow: thisRow,
nextRow: nextRow,
isFree: isFree
});
})
dataRows.sort(function(a, b) {
return a.amount - b.amount;
});
maxPages = Math.ceil(dataRows.length/settings.pageRows);
maxFreePages = Math.ceil(maxFree/settings.pageRows);
tableRows = tableBody.find("tr");
buttonMore.on('click', showMore);
buttonLess.on('click', showLess);
buttonFree.on('change', changedFree);
displayRows();
checkButtons();
})
};
$('.sort_paging').sortPaging();
table,
tr,
td {
border: 1px solid black;
padding: 8px;
}
h1 {
font-size: 18px;
}
.element_invisible {
display: none;
}
.product-information-row {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Table sorting on page load with paging</h1>
<div class="sort_paging">
<p>
<input type="checkbox" class="filter-free" /> Free Handset
</p>
<table class="internalActivities">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
</thead>
<tbody>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£364.00 upfront</span>
<br><span class="amount">£10.10 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£364.00 upfront
<br>£10.10 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£40.40 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.40 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£30.30 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£30.30 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£16.04 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.04 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£134.00 upfront</span>
<br><span class="amount">£12.19 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£134.00 upfront
<br>£12.19 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£120.00 upfront</span>
<br><span class="amount">£14.22 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£120.00 upfront
<br>£14.22 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£50.22 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.22 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£10.33 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£10.33 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£40.45 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.45 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£200.00 upfront</span>
<br><span class="amount">£30.84 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£200.00 upfront
<br>£30.84 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£16.14 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.14 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£12.10 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£12.10 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£14.02 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£14.02 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£50.88 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.88 per month</td>
</tr>
</tbody>
</table>
<input type="button" class="seeMoreRecords" value="More">
<input type="button" class="seeLessRecords" value="Less">
</div>
<h2>Second table below</h2>
<div class="sort_paging">
<p>
<input type="checkbox" class="filter-free" /> Free Handset
</p>
<table class="internalActivities">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
</thead>
<tbody>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£364.00 upfront</span>
<br><span class="amount">£10.10 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£364.00 upfront
<br>£10.10 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£40.40 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.40 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£30.30 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£30.30 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£16.04 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.04 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£134.00 upfront</span>
<br><span class="amount">£12.19 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£134.00 upfront
<br>£12.19 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£120.00 upfront</span>
<br><span class="amount">£14.22 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£120.00 upfront
<br>£14.22 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£50.22 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.22 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£10.33 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£10.33 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£40.45 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£40.45 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="handsetcost">£200.00 upfront</span>
<br><span class="amount">£30.84 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">£200.00 upfront
<br>£30.84 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£16.14 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£16.14 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£12.10 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£12.10 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£14.02 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£14.02 per month</td>
</tr>
<tr class="product-data-row">
<td>data</td>
<td>data</td>
<td>data</td>
<td><span class="free">No upfront cost</span>
<br><span class="amount">£50.88 per month</span></td>
</tr>
<tr class="product-information-row">
<td colspan="100%">No upfront cost
<br>£50.88 per month</td>
</tr>
</tbody>
</table>
<input type="button" class="seeMoreRecords" value="More">
<input type="button" class="seeLessRecords" value="Less">
</div>
Also on updated Fiddle;

hide child element with dynamic bootstrap table

I'm using a dynamic table example I found here (bootply). Its basically a table with a parent, child relationship, so you can click on a row and it will drop down another row. I added one more level to this example, so you can think of this example as a parent, child, grandchild relationship. My issue is that if you go two levels deep, and then click the parent row it only hides the child row, but not the grandchild rows. I need to fix this 'bug' somehow.. I've tried wrapping the parent row in a div and using href="#collapse1" and than putting that id on the grandchild row but that doesn't work. Any other suggestions are greatly appreciated. Here's the html..
<table class="table table-responsive table-hover">
<thead>
<tr><th>Column</th><th>Column</th><th>Column</th><th>Column</th></tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" id="row1" data-target=".row1">
<td><i class="glyphicon glyphicon-plus"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="collapse row1">
<td>- child row</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="clickable collapse row1" data-toggle="collapse" id="row3" data-target=".row3">
<td>- child row</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="collapse row3">
<td>- grandchild row</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="clickable" data-toggle="collapse" id="row2" data-target=".row2">
<td><i class="glyphicon glyphicon-plus"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="collapse row2">
<td>- child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
<tr class="collapse row2">
<td>- child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
</tbody>
</table>
Doesn't work with a fiddle.js for some reason.. but if you go to the link and copy&paste this code you can replicate the issue.

Horizontally and vertically responsive table with sticky/fixed headers?

On a page on a website I'm building, there will only be a table displayed. I want that table to stick to the edges of the screen regardless of the width/height of the screen.
This table also needs to have sticky/fixed headers (so when they scroll down, the headers are still visible), which I'm finding complicates things as the widths and heights seemingly need to be set manually.
Also, it needs to be able to be horizontally scrollable in case there's a ton of columns. I don't want them all to be 10px wide, but the table itself still needs to stick to the edges of the screen as the dimensions change.
It works with keeping the headers sticky as the user scrolls, but the width and height of the elements have to all be set manually, which means it's not responsive whatsoever.
Is this possible at all? I'm not averse to JavaScript, but a pure CSS solution would be slightly preferred.
(JSFiddle)
body {
margin: 0;
padding: 0;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 375px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-border-horizontal-spacing: 0;
}
th,
td {
text-align: left;
padding: 10px 10px;
width: 105px;
word-wrap: break-word;
word-break: break-all;
-webkit-hyphens: auto;
hyphens: auto;
}
thead {
background-color: black;
color: #fff;
}
thead tr {
display: block;
position: relative;
}
tbody {
display: block;
overflow: auto;
height: 300px;
}
<table>
<thead>
<tr>
<th>Longer title for testing</th>
<th>Color</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple ioeras eionars ienraist eioarn stio enar sotinera oietnar i i i i i i i i i i i i i i i i i i i i i to</td>
<td>Red aeinrs tienras tienr eiostnnearhstniehrastneihrsaetinh iaroes nte narse itnar einaer ns eanr enrsena ernes netnea rnst sr</td>
<td>These are red.</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple / Green</td>
<td>These are purple and green.</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Tomato</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cherry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cantelope</td>
<td>Orange</td>
<td>These are orange inside.</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Green</td>
<td>These are green inside.</td>
</tr>
<tr>
<td>Papaya</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Raspberry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>These are blue.</td>
</tr>
<tr>
<td>Mango</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Passion Fruit</td>
<td>Green</td>
<td>These are green.</td>
</tr>
</tbody>
</table>

If body height and width is set to 100% it will allow the child (table) to take the whole page.
body{
height: 100%;
width: 100%;
}
table{
height: 100%;
width: 100%;
}

Is this what you are looking for?
https://jsfiddle.net/6o1gbq6x/
<style>
body {
margin: 0;
padding: 0;
}
.table_container { /*responsive container*/
width: 100%;
margin: 0 auto;
height: 100%;
max-height: 300px;
}
table {
border-collapse: collapse;
width: auto;
-webkit-overflow-scrolling: touch;
-webkit-border-horizontal-spacing: 0;
}
th,
td {
text-align: left;
padding: 10px 10px;
width: 33%;
min-width: 100px;
word-wrap: break-word;
word-break: break-all;
-webkit-hyphens: auto;
hyphens: auto;
}
thead {
background-color: black;
color: #fff;
}
thead tr {
display: block;
position: relative;
}
tbody {
display: block;
overflow: auto;
height: 300px;
}
</style>
<div class="table_container">
<table>
<thead>
<tr>
<th>Longer title for testing</th>
<th>Color</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple ioeras eionars ienraist eioarn stio enar sotinera oietnar i i i i i i i i i i i i i i i i i i i i i to</td>
<td>Red aeinrs tienras tienr eiostnnearhstniehrastneihrsaetinh iaroes nte narse itnar einaer ns eanr enrsena ernes netnea rnst sr</td>
<td>These are red.</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple / Green</td>
<td>These are purple and green.</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Tomato</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cherry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cantelope</td>
<td>Orange</td>
<td>These are orange inside.</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Green</td>
<td>These are green inside.</td>
</tr>
<tr>
<td>Papaya</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Raspberry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>These are blue.</td>
</tr>
<tr>
<td>Mango</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Passion Fruit</td>
<td>Green</td>
<td>These are green.</td>
</tr>
</tbody>
</table>
</div>
If not, please let me know and I'll adjust.

You can use position: fixed in thead tag(in css) to fix the table header at top
and for full width set width:100%

position:sticky on the <th> element is the answer.
The widths of the rows are not being set individually, however a min-width can be set on the <th> element.
Otherwise the width of the column will be either:
The width of the column title (because of white-space: nowrap on <th>), or
The width of the largest word in a <td> cell
I have added more columns to demonstrate the horizontal scrolling effect.
body {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 10px 10px;
}
th {
white-space: nowrap;
/* min-width: 105px; */
}
td {
word-wrap: break-word;
word-break: normal;
}
thead>tr>th {
position: sticky;
top: 0px;
left: 0px;
background-color: black;
color: white;
}
<table>
<thead>
<tr>
<th>Longer title for testing</th>
<th>Color</th>
<th>Description</th>
<th>A</th>
<th>B</th>
<th>Column</th>
<th>Column</th>
<th>An extremely long title to force horizontal scroll on full screen</th>
<th>An extremely long title to force horizontal scroll on full screen</th>
<th>An extremely long title to force horizontal scroll on full screen</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple ioeras eionars ienraist eioarn stio enar sotinera oietnar i i i i i i i i i i i i i i i i i i i i i to</td>
<td>Red aeinrs tienras tienr eiostnnearhstniehrastneihrsaetinh iaroes nte narse itnar einaer ns eanr enrsena ernes netnea rnst sr</td>
<td>These are red.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple / Green</td>
<td>These are purple and green.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Red</td>
<td>These are red.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Tomato</td>
<td>Red</td>
<td>These are red.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Cherry</td>
<td>Red</td>
<td>These are red.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Cantelope</td>
<td>Orange</td>
<td>These are orange inside.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Green</td>
<td>These are green inside.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Papaya</td>
<td>Green</td>
<td>These are green.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Raspberry</td>
<td>Red</td>
<td>These are red.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>These are blue.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Mango</td>
<td>Orange</td>
<td>These are orange.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Passion Fruit</td>
<td>Green</td>
<td>These are green.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>

Moving (highlighting) the last row in an HTML table using jQuery

I need your help.
How can the existing jQuery code below be modified such that, at the click of a button, I would be able to move to the last row in the html table and select (highlight) it? My way of thought was that it would be possible to get the row count, then using the row count, move the selection to the last row. I guess I was wrong because its not working :(
Im jQuery friendly please.
Here is the markup:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
.highlight {
background-color: rgb(255,0,0);
}
</style>
<script type="text/javascript">
window.onload = function() {
var rowCount = $('#data >tbody >tr').length;
var $tbody = $("#data tbody").on('click', 'tr', function() {
highlight($(this));
});
$('#goto_prev').click(function() {
var $prev = $tbody.find('.highlight').prev();
highlight($prev);
});
$('#goto_next').click(function() {
var $next = $tbody.find('.highlight').next();
highlight($next);
});
$('#goto_last').click(function() {
highlight(rowCount);
});
function highlight($row) {
if ($row.length) {
$tbody.children().removeClass("highlight");
$row.addClass('highlight');
$("#rownum").val($row[0].rowIndex);
}
}
}
</script>
</head>
<body>
<table id="data" border="1" cellspacing="1" cellpadding="1">
<thead>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
<th>header5</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
Row Number:
<br>
<input type="text" id="rownum" readonly>
<input type="button" id="goto_prev" value="prev">
<input type="button" id="goto_next" value="next">
<input type="button" id="goto_last" value="last">
</body>
</html>

Your highlight function takes a Jquery object as parameter, it won't work by sending index of row. You can solve it using this:
$('#goto_last').click(function() {
highlight($("#data tr").eq(rowCount));
});