Freezing first row while highlighting row and column

Freezing first row while highlighting row and column - javascript

I need to do a table where I need to freeze the top row and highlight the row and column on hover.
I have the 2 working separately but when I combine them, it isn't working right.
#table_grid {
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
font-family: arial, verdana, sans-serif;
font-size: 12px;
background: #fff;
margin: 0px;
text-align: left;
max-width: 1200px;
border-radius: 10px;
}
#table_grid td,
th {
color: #669;
padding: 9px 8px 4px 8px;
font-size: 13px;
position: relative;
}
#table_grid tr:hover {
background-color: rgba(220, 220, 220, 0.5);
}
#table_grid td:hover::after,
th:hover::after {
background-color: rgba(211, 211, 211, 0.2);
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
pointer-events: none;
}
table {
text-align: left;
position: relative;
border-collapse: collapse;
}
th,
td {
padding: 0.25rem;
}
th {
background: white;
position: sticky;
top: 0;
/* Don't forget this, required for the stickiness */
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
<table id="table_grid">
<tr class="red">
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
If I change
overflow: hidden
to
overflow: auto
in #table_grid, the highlight on hover and freezing the first row is working but the hightlight on hover is running off the screen.
If I change it back to
overflow: hidden
Hightlight on hover is working properly but the first row is not freezing.
Is there any way to fix this?

Related

How to design a Table with a fixed header during printing without cutting the header?

I had this Table, I want when I print the table, should print with a fixed header on each paper, and it's doing that, but the headers does not start on the top of the paper, something going wrong
<table id="TableDtl" class="tableClass cellWithborder"
style="width:100%;overflow:scroll; font-weight:bold; border: 1px solid Black;">
<thead>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header0>ID</header0>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header1>NAME</header1>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header2>Quantity</header2>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header3>Per</header3>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header4>Price</header4>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header5>Free</header5>
</th>
</thead>
<tbody>
<tr>
<td style="font-size:x-large;font-weight:bold;">100-933-03</td>
<td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
<td style="font-size:x-large;font-weight:bold;">4</td>
<td style="font-size:x-large;font-weight:bold;">Test</td>
<td style="font-size:x-large;font-weight:bold;">444</td>
<td style="font-size:x-large;font-weight:bold;">6666</td>
</tr>
</tbody>
</table>
I search about it a lot and I try something like this style:
<style>
#media print {
#page{
margin:1em;
}
table {
page-break-after:auto;
border-collapse:collapse;
}
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead {
display:table-header-group;
}
tfoot { display:table-footer-group }
}
</style>
It didn't work at all, and I try playing with (page-break-before, page-break-after, page-break-inside) and also nothing happen 😐

<style type="text/css">
#media print{ input {display:none} };
</style>
<input type=button value="print" onclick=javascript:window.print()>
<table id="TableDtl" class="tableClass cellWithborder"
style="width:100%;overflow:scroll; font-weight:bold; border: 1px solid Black;" >
<thead>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header0>ID</header0>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header1>NAME</header1>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header2>Quantity</header2>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header3>Per</header3>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header4>Price</header4>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header5>Free</header5>
</th>
</thead>
<tbody>
<tr>
<td style="font-size:x-large;font-weight:bold;">100-933-03</td>
<td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
<td style="font-size:x-large;font-weight:bold;">4</td>
<td style="font-size:x-large;font-weight:bold;">Test</td>
<td style="font-size:x-large;font-weight:bold;">444</td>
<td style="font-size:x-large;font-weight:bold;">6666</td>
</tr>
<tr>
<td style="font-size:x-large;font-weight:bold;">100-933-03</td>
<td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
<td style="font-size:x-large;font-weight:bold;">4</td>
<td style="font-size:x-large;font-weight:bold;">Test</td>
<td style="font-size:x-large;font-weight:bold;">444</td>
<td style="font-size:x-large;font-weight:bold;">6666</td>
</tr>
<tr>
<td style="font-size:x-large;font-weight:bold;">100-933-03</td>
<td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
<td style="font-size:x-large;font-weight:bold;">4</td>
<td style="font-size:x-large;font-weight:bold;">Test</td>
<td style="font-size:x-large;font-weight:bold;">444</td>
<td style="font-size:x-large;font-weight:bold;">6666</td>
</tr>
<tr>
<td style="font-size:x-large;font-weight:bold;">100-933-03</td>
<td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
<td style="font-size:x-large;font-weight:bold;">4</td>
<td style="font-size:x-large;font-weight:bold;">Test</td>
<td style="font-size:x-large;font-weight:bold;">444</td>
<td style="font-size:x-large;font-weight:bold;">6666</td>
</tr>
</tbody>
</table>
I have fixed header display issue on print's every page. You need to add multiple TR inside TBODY and check the result. If any issue found then let me know

You have to set display of thead: table-header-group
thead {
display: table-header-group
}
Demo:
table {
border-collapse:collapse;
height: 400px;
}
td, th {
text-align: center;
padding: 8px;
}
table, td, th {
border: 1px solid #dddddd;
}
#media print {
#page{
margin:1em;
}
table {
page-break-after:auto;
}
td, th {
padding: 8px;
}
tr {
page-break-inside:avoid; page-break-after:auto
}
td { page-break-inside:avoid; page-break-after:auto }
thead {
display:table-header-group; /* <== here */
}
tfoot { display:table-footer-group }
}
<input type="button" value="Print" onclick="window.print()">
<br />
<br />
<table>
<thead>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header0>ID</header0>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header1>NAME</header1>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header2>Quantity</header2>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header3>Per</header3>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header4>Price</header4>
</th>
<th style="height:80px; font-size:x-large;font-weight:bold;">
<header5>Free</header5>
</th>
</thead>
<tbody>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
<tr>
<td>100-933-03</td>
<td>Just For Test</td>
<td>4</td>
<td>Test</td>
<td>444</td>
<td>6666</td>
</tr>
</tbody>
</table>

Align columns from tbody under their column title in thead

At the beginning it was a simple table with no css styling on it.
The first requirement was to make it scrollable and with a fixed height.
In order do to that it was added:
height: 275px;
overflow: scroll;
It wasn't enough, it also needed display: block;.
Now, the thead looks bad, so I added display: table; to it.
It looks quite good but it still has a problem, the columns are not aligned vertically.
For example, the column with the title Test2 should have under it the column with $test but that it's not happening.
Is there a way to align those columns and keep the scrolling functionality?
.my-table {
width: 100%;
}
.my-thead {
display: table;
}
.my-tbody {
display: block;
height: 275px;
overflow: scroll;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<table class="my-table">
<thead class="my-thead">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Column</th>
<th>Test</th>
<th>Test2</th>
<th>Priceeeee</th>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody class="my-tbody">
<tr>
<td>January</td>
<td>$100</td>
<td>test</td>
<td>aaaaaaaa</td>
<td>$test</td>
<td>12314332</td>
<td>$test</td>
<td>33333324</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>March</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>April</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>May</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>June</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>July</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>August</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>September</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>testesttest</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
</tbody>
</table>
</body>
</html>

columns can be vertically aligned by adding width property. Add the below given css:
th {
min-width: 130px;
text-align: left;
}
td {
width: 130px;
text-align: left;
}
.my-table {
width: 100%;
}
.my-thead {
display: table;
}
.my-tbody {
display: block;
height: 275px;
overflow: scroll;
}
th {
min-width: 130px;
text-align: left;
}
td {
width: 130px;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<table class="my-table">
<thead class="my-thead">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Column</th>
<th>Test</th>
<th>Test2</th>
<th>Priceeeee</th>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody class="my-tbody">
<tr>
<td>January</td>
<td>$100</td>
<td>test</td>
<td>aaaaaaaa</td>
<td>$test</td>
<td>12314332</td>
<td>$test</td>
<td>33333324</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>March</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>April</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>May</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>June</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>July</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>August</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>September</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>testesttest</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
</tbody>
</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
border:solid 1px black;
}
thead th {
background-color:grey;
border-bottom: none;
border-right: 1px solid #CCC;
font-weight: bold;
color: #fff;
padding: 4px 3px 4px 4px;
text-align: left;
width: 80px;
}
thead{
display:block;
}
tbody {
height: 275px;
overflow-y:scroll;
display:block;
}
tbody td {
background: #FFF;
border-bottom: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 4px 3px 4px 4px;
}
th,td{
width: 80px;
}
</style>
</head>
<body>
<table class="my-table">
<thead class="my-thead">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Column</th>
<th>Test</th>
<th>Test2</th>
<th>Priceeeee</th>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody class="my-tbody">
<tr>
<td>January</td>
<td>$100</td>
<td>test</td>
<td>aaaaaaaa</td>
<td>$test</td>
<td>12314332</td>
<td>$test</td>
<td>33333324</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>March</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>April</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>May</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>June</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>July</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>August</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>September</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
<td>$test</td>
<td>$100</td>
</tr>
<tr>
<td>October</td>
<td>$80</td>
<td>test</td>
<td>$1

Footable Sorting by incomplete line

In my table, the lines are form:
97.5%,
10/30,
41 RPM,
3.6 seconds,
$4750,
$100
If I set the type data-type = "number" in the rows everything is removed except for the numbers, but I need to be output completely as I wrote in the example.
How can I do what sorted by numeric values only? I think it can be realise through the JS, but I do not know it.
Regarding the second line, I want to be sorted by numbers before the character "/"
jQuery(function($) {
$('.table').footable();
});
body>table>thead>tr>th {
text-transform: capitalize;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table" data-sorting="true">
<thead>
<tr>
<th data-breakpoints="xs" data-type="number">rank</th>
<th>weapon name</th>
<th data-type="number">damage</th>
<th data-breakpoints="xs" data-type="number" data-decimal-separator=".">armor pen</th>
<th data-breakpoints="xs sm" data-type="number">magazine capacity</th>
<th data-breakpoints="xs sm md" data-type="number">rate of fire</th>
<th data-breakpoints="xs sm md" data-type="number" data-decimal-separator=".">reload time</th>
<th data-breakpoints="xs sm md" data-type="number">price</th>
<th data-breakpoints="xs sm md" data-type="number">reward</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>AWP</td>
<td>115</td>
<td>97.5%</td>
<td>10/30</td>
<td>41 RPM</td>
<td>3.6 seconds</td>
<td>$4750</td>
<td>$100</td>
</tr>
<tr>
<td>2</td>
<td>*SCAR-20</td>
<td>80</td>
<td>82.5%</td>
<td>20/90</td>
<td>240 RPM</td>
<td>3.1 seconds</td>
<td>$5000</td>
<td>$300</td>
</tr>
<tr>
<td>3</td>
<td>*G3SG1</td>
<td>80</td>
<td>82.5%</td>
<td>20/90</td>
<td>240 RPM</td>
<td>4.7 seconds</td>
<td>$5000</td>
<td>$300</td>
</tr>
<tr>
<td>4</td>
<td>*Negev</td>
<td>35</td>
<td>75%</td>
<td>150/200</td>
<td>1000 RPM</td>
<td>5.7 seconds</td>
<td>$5700</td>
<td>$300</td>
</tr>
<tr>
<td>5</td>
<td>*M249</td>
<td>32</td>
<td>80%</td>
<td>100/200</td>
<td>750 RPM</td>
<td>5.7 seconds</td>
<td>$5200</td>
<td>$300</td>
</tr>
<tr>
<td>6</td>
<td>*SG 553</td>
<td>30</td>
<td>100%</td>
<td>30/90</td>
<td>666 RPM</td>
<td>2.8 seconds</td>
<td>$3000</td>
<td>$300</td>
</tr>
<tr>
<td>7</td>
<td>AK-47</td>
<td>36</td>
<td>77.5%</td>
<td>30/90</td>
<td>600 RPM</td>
<td>2.5 seconds</td>
<td>$2700</td>
<td>$300</td>
</tr>
<tr>
<td>8</td>
<td>M4A4</td>
<td>33</td>
<td>70%</td>
<td>30/90</td>
<td>666 RPM</td>
<td>3.1 seconds</td>
<td>$3100</td>
<td>$300</td>
</tr>
<tr>
<td>9</td>
<td>M4A1-S</td>
<td>33</td>
<td>70%</td>
<td>20/40</td>
<td>666 RPM</td>
<td>3.1 seconds</td>
<td>$3200</td>
<td>$300</td>
</tr>
<tr>
<td>10</td>
<td>*AUG</td>
<td>28</td>
<td>90%</td>
<td>30/90</td>
<td>666 RPM</td>
<td>3.8 seconds</td>
<td>$3300</td>
<td>$300</td>
</tr>
<tr>
<td>11</td>
<td>Galil AR</td>
<td>30</td>
<td>77.5%</td>
<td>35/90</td>
<td>666 RPM</td>
<td>3.0 seconds</td>
<td>$2000</td>
<td>$300</td>
</tr>
<tr>
<td>12</td>
<td>Famas</td>
<td>30</td>
<td>70%</td>
<td>25/90</td>
<td>666 RPM</td>
<td>3.3 seconds</td>
<td>$2250</td>
<td>$300</td>
</tr>
<tr>
<td>13</td>
<td>^P90</td>
<td>26</td>
<td>69%</td>
<td>50/100</td>
<td>857 RPM</td>
<td>3.3 seconds</td>
<td>$2350</td>
<td>$300</td>
</tr>
<tr>
<td>14</td>
<td>SSG 08</td>
<td>88</td>
<td>85%</td>
<td>10/90</td>
<td>48 RPM</td>
<td>3.7 seconds</td>
<td>$1700</td>
<td>$300</td>
</tr>
<tr>
<td>15</td>
<td>Mag-7</td>
<td>240</td>
<td>75%</td>
<td>5/32</td>
<td>71 RPM</td>
<td>2.4 seconds</td>
<td>$1800</td>
<td>$900</td>
</tr>
<tr>
<td>16</td>
<td>UMP-45</td>
<td>35</td>
<td>65%</td>
<td>25/100</td>
<td>666 RPM</td>
<td>3.5 seconds</td>
<td>$1200</td>
<td>$600</td>
</tr>
<tr>
<td>17</td>
<td>*XM1014</td>
<td>120</td>
<td>80%</td>
<td>7/32</td>
<td>240 RPM</td>
<td>4.5 seconds</td>
<td>$2000</td>
<td>$900</td>
</tr>
<tr>
<td>18</td>
<td>*PP-Bizon</td>
<td>27</td>
<td>57.5%</td>
<td>64/120</td>
<td>750 RPM</td>
<td>2.4 seconds</td>
<td>$1400</td>
<td>$600</td>
</tr>
<tr>
<td>19</td>
<td>*Nova</td>
<td>243</td>
<td>50%</td>
<td>8/32</td>
<td>68 RPM</td>
<td>5.6 seconds</td>
<td>$1200</td>
<td>$900</td>
</tr>
<tr>
<td>20</td>
<td>*MP7</td>
<td>29</td>
<td>62.5%</td>
<td>30/120</td>
<td>800 RPM</td>
<td>3.1 seconds</td>
<td>$1700</td>
<td>$600</td>
</tr>
<tr>
<td>21</td>
<td>*Mac 10</td>
<td>29</td>
<td>57.5%</td>
<td>30/100</td>
<td>800 RPM</td>
<td>2.6 seconds</td>
<td>$1050</td>
<td>$600</td>
</tr>
<tr>
<td>22</td>
<td>*MP9</td>
<td>26</td>
<td>60%</td>
<td>30/120</td>
<td>857 RPM</td>
<td>2.1 seconds</td>
<td>$1250</td>
<td>$600</td>
</tr>
<tr>
<td>23</td>
<td>*Sawed-Off</td>
<td>256</td>
<td>75%</td>
<td>7/32</td>
<td>71 RPM</td>
<td>5.0 seconds</td>
<td>$1200</td>
<td>$900</td>
</tr>
</tbody>
</table>
</body>
</html>
If above snippet won't work check this ---> Footable Sorting

You can use data-sort-value data attribute to manually set the value for sorting.
From Footable Sorting Doc
Cell options
sortValue : The value used by the component to perform
sorting operations.
To supply this option through data attributes you must specify the
attribute on the td element.
You can achieve this by either directly using data-sort-value inside a td or you can use javascript
1. Static Example
<table>
<tr>
<td data-sort-value="My Sort Value">...</td>
...
</tr>
...
</table>
2. Javascript Example
jQuery(function($){
$('.table').footable({
"rows": [{
"id": {
"options": {
"sortValue": "My Sort Value"
},
"value": ...
}
},{
...
}]
});
})
Below is the modified version of your snippet
jQuery(function($) {
$('.table').footable();
});
body>table>thead>tr>th {
text-transform: capitalize;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<table class="table" data-sorting="true">
<thead>
<tr>
<th data-breakpoints="xs" data-type="number">rank</th>
<th>weapon name</th>
<th data-type="number">damage</th>
<th data-breakpoints="xs" data-type="number" data-decimal-separator=".">armor pen</th>
<th data-breakpoints="xs sm">magazine capacity</th>
<th data-breakpoints="xs sm md">rate of fire</th>
<th data-breakpoints="xs sm md" data-type="number" data-decimal-separator=".">reload time</th>
<th data-breakpoints="xs sm md">price</th>
<th data-breakpoints="xs sm md">reward</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>AWP</td>
<td>115</td>
<td data-sort-value="97.5">97.5%</td>
<td data-sort-value="10">10/30</td>
<td data-sort-value="41">41 RPM</td>
<td data-sort-value="3.6">3.6 seconds</td>
<td data-sort-value="4750">$4750</td>
<td data-sort-value="100">$100</td>
</tr>
<tr>
<td>2</td>
<td>*SCAR-20</td>
<td>80</td>
<td data-sort-value="82.5">82.5%</td>
<td data-sort-value="20">20/90</td>
<td data-sort-value="240">240 RPM</td>
<td data-sort-value="3.1">3.1 seconds</td>
<td data-sort-value="5000">$5000</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>3</td>
<td>*G3SG1</td>
<td>80</td>
<td data-sort-value="82.5">82.5%</td>
<td data-sort-value="20">20/90</td>
<td data-sort-value="240">240 RPM</td>
<td data-sort-value="4.7">4.7 seconds</td>
<td data-sort-value="5000">$5000</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>4</td>
<td>*Negev</td>
<td>35</td>
<td data-sort-value="75">75%</td>
<td data-sort-value="150">150/200</td>
<td data-sort-value="1000">1000 RPM</td>
<td data-sort-value="5.7">5.7 seconds</td>
<td data-sort-value="5700">$5700</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>5</td>
<td>*M249</td>
<td>32</td>
<td data-sort-value="80">80%</td>
<td data-sort-value="100">100/200</td>
<td data-sort-value="750">750 RPM</td>
<td data-sort-value="5.7">5.7 seconds</td>
<td data-sort-value="5200">$5200</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>6</td>
<td>*SG 553</td>
<td>30</td>
<td data-sort-value="100">100%</td>
<td data-sort-value="30">30/90</td>
<td data-sort-value="666">666 RPM</td>
<td data-sort-value="2.8">2.8 seconds</td>
<td data-sort-value="3000">$3000</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>7</td>
<td>AK-47</td>
<td>36</td>
<td data-sort-value="77.5">77.5%</td>
<td data-sort-value="30">30/90</td>
<td data-sort-value="600">600 RPM</td>
<td data-sort-value="2.5">2.5 seconds</td>
<td data-sort-value="2700">$2700</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>8</td>
<td>M4A4</td>
<td>33</td>
<td data-sort-value="70">70%</td>
<td data-sort-value="30">30/90</td>
<td data-sort-value="666">666 RPM</td>
<td data-sort-value="3.1">3.1 seconds</td>
<td data-sort-value="3100">$3100</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>9</td>
<td>M4A1-S</td>
<td>33</td>
<td data-sort-value="70">70%</td>
<td data-sort-value="20">20/40</td>
<td data-sort-value="666">666 RPM</td>
<td data-sort-value="3.1">3.1 seconds</td>
<td data-sort-value="3200">$3200</td>
<td data-sort-value="300">$300</td>
</tr>
<tr>
<td>10</td>
<td>*AUG</td>
<td>28</td>
<td data-sort-value="90">90%</td>
<td data-sort-value="30">30/90</td>
<td data-sort-value="666">666 RPM</td>
<td data-sort-value="3.8">3.8 seconds</td>
<td data-sort-value="3300">$3300</td>
<td data-sort-value="300">$300</td>
</tr>
</tbody>
</table>
</body>
</html>
If above snippet won't work, try this ---> Sorting using Footable

Want to Improve code functionality for Pagination in Jquery

I have made table which has sorting option also it has pagination. But the problem it has only Next, Last, Previous and First. I want it also should have page number displaying on which page it is and the total number of pages.
I tried getting the button of page number by adding it but the problem is that on clicking them it won't go the page. Actually I copied the pagination from somewhere so I am not able to do it properly.
The working code is here
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.js"></script>
<script type="text/javascript" src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="http://tablesorter.com/docs/js/chili/chili-1.8b.js"></script>
<script type="text/javascript" src="http://tablesorter.com/docs/js/docs.js"></script>
<script type="text/javascript" src="http://flaviusmatis.github.io/simplePagination.js/jquery.simplePagination.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("table")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $(".tablesorter")});
});
</script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table id="myTable" class="" style="width:50%">
<thead>
<tr>
<th><span>ID</span></th>
<th><span>Name</span></th>
<tr>
<tbody>
<td>1</td>
<td>Jill</td>
</tr>
<tr>
<td>2</td>
<td>Bill</td>
</tr>
<tr>
<td>3</td>
<td>Chill</td>
</tr>
<tr>
<td>4</td>
<td>Adam</td>
</tr>
<tr>
<td>5</td>
<td>Andrea</td>
</tr>
<tr>
<td>6</td>
<td>Stephen</td>
</tr>
<tr>
<td>7</td>
<td>Rose</td>
</tr>
<tr>
<td>8</td>
<td>Chuck</td>
</tr>
<tr>
<td>9</td>
<td>Barney</td>
</tr>
<tr>
<td>10</td>
<td>Alan</td>
</tr>
<tr>
<td>11</td>
<td>Ted</td>
</tr>
<tr>
<td>12</td>
<td >Simon</td>
</tr>
<tr>
<td>13</td>
<td >Simon</td>
</tr>
<tr>
<td>14</td>
<td >Larry</td>
</tr>
<tr>
<td>15</td>
<td >Harry</td>
</tr>
<tr>
<td>16</td>
<td >Ron</td>
</tr>
<tr>
<td>17</td>
<td>George</td>
</tr>
<td >18</td>
<td>John</td>
</tr>
<tr>
<td>19</td>
<td>Jay</td>
</tr>
<tr>
<td>20</td>
<td>Laura</td>
</tr>
<tr>
<td>21</td>
<td>Michael</td>
</tr>
<tr>
<td>22</td>
<td>George</td>
</tr>
<td >23</td>
<td>John</td>
</tr>
<tr>
<td>24</td>
<td>Jay</td>
</tr>
<tr>
<td>25</td>
<td>Laura</td>
</tr>
<tr>
<td>26</td>
<td>Michael</td>
</tr>
<tr>
<td>27</td>
<td>George</td>
</tr>
<td >28</td>
<td>John</td>
</tr>
<tr>
<td>29</td>
<td>Jay</td>
</tr>
<tr>
<td>30</td>
<td>Laura</td>
</tr>
<tr>
<td>31</td>
<td>Michael</td>
</tr>
<tr>
<td>32</td>
<td>George</td>
</tr>
<td >33</td>
<td>John</td>
</tr>
<tr>
<td>34</td>
<td>Jay</td>
</tr>
<tr>
<td>35</td>
<td>Laura</td>
</tr>
<tr>
<td>36</td>
<td>Michael</td>
</tr>
<tr>
<td>37</td>
<td>George</td>
</tr>
<td >38</td>
<td>John</td>
</tr>
<tr>
<td>39</td>
<td>Jay</td>
</tr>
<tr>
<td>40</td>
<td>Laura</td>
</tr>
<tr>
<td>41</td>
<td>Michael</td>
</tr>
<tr>
<td>42</td>
<td>George</td>
</tr>
<td >43</td>
<td>John</td>
</tr>
<tr>
<td>44</td>
<td>Jay</td>
</tr>
<tr>
<td>45</td>
<td>Laura</td>
</tr>
<tr>
<td>46</td>
<td>Michael</td>
</tr>
<tr>
<td>47</td>
<td>George</td>
</tr>
<td >48</td>
<td>John</td>
</tr>
<tr>
<td>49</td>
<td>Jay</td>
</tr>
<tr>
<td>50</td>
<td>Laura</td>
</tr>
<tr>
<td>51</td>
<td>Michael</td>
</tr>
<tr>
<td>52</td>
<td>George</td>
</tr>
<td >53</td>
<td>John</td>
</tr>
<tr>
<td>54</td>
<td>Jay</td>
</tr>
<tr>
<td>55</td>
<td>Laura</td>
</tr>
<tr>
<td>56</td>
<td>Michael</td>
</tr>
<tr>
<td>57</td>
<td>George</td>
</tr>
<td >58</td>
<td>John</td>
</tr>
<tr>
<td>59</td>
<td>Jay</td>
</tr>
<tr>
<td>60</td>
<td>Laura</td>
</tr>
<tr>
<td>61</td>
<td>Michael</td>
</tr>
<tr>
<td>62</td>
<td>George</td>
</tr>
<tr>
<td >63</td>
<td>John</td>
</tr>
<tr>
<td>64</td>
<td>Jay</td>
</tr>
<tr>
<td>65</td>
<td>Laura</td>
</tr>
<tr>
<td>66</td>
<td>Michael</td>
</tr>
<tr>
<td>67</td>
<td>George</td>
</tr>
<td >68</td>
<td>John</td>
</tr>
<tr>
<td>69</td>
<td>Jay</td>
</tr>
<tr>
<td>70</td>
<td>Laura</td>
</tr>
<tr>
<td>71</td>
<td>Michael</td>
</tr>
<tr>
<td >72</td>
<td>John</td>
</tr>
<tr>
<td>73</td>
<td>Jay</td>
</tr>
<tr>
<td>74</td>
<td>Jay</td>
</tr>
<tr>
<td>75</td>
<td>Laura</td>
</tr>
<tr>
<td>76</td>
<td>Michael</td>
</tr>
<tr>
<td>77</td>
<td>George</td>
</tr>
<td >78</td>
<td>John</td>
</tr>
<tr>
<td>79</td>
<td>Jay</td>
</tr>
<tr>
<td>80</td>
<td>Laura</td>
</tr>
<tr>
<td>81</td>
<td>Michael</td>
</tr>
<tr>
<td >82</td>
<td>John</td>
</tr>
<tr>
<td >83</td>
<td>John</td>
</tr>
<tr>
<td>84</td>
<td>Jay</td>
</tr>
<tr>
<td>85</td>
<td>Laura</td>
</tr>
<tr>
<td>86</td>
<td>Michael</td>
</tr>
<tr>
<td>87</td>
<td>George</td>
</tr>
<td >88</td>
<td>John</td>
</tr>
<tr>
<td>89</td>
<td>Jay</td>
</tr>
<tr>
<td>90</td>
<td>Laura</td>
</tr>
<tr>
<td>91</td>
<td>Michael</td>
</tr>
<tr>
<td>92</td>
<td>Michael</td>
</tr>
<tr>
<td >93</td>
<td>John</td>
</tr>
<tr>
<td>94</td>
<td>Jay</td>
</tr>
<tr>
<td>95</td>
<td>Laura</td>
</tr>
<tr>
<td>96</td>
<td>Michael</td>
</tr>
<tr>
<td>97</td>
<td>George</td>
</tr>
<td >98</td>
<td>John</td>
</tr>
<tr>
<td>99</td>
<td>Jay</td>
</tr>
<tr>
<td>100</td>
<td>Laura</td>
</tr>
</tbody>
</table>
<div id="pager" class="tablesorter" style="top: 900px; position: absolute;">
<form>
<img src="http://tablesorter.com/addons/pager/icons/first.png" class="first">
<img src="http://tablesorter.com/addons/pager/icons/prev.png" class="prev">
<img src="http://tablesorter.com/addons/pager/icons/next.png" class="next">
<img src="http://tablesorter.com/addons/pager/icons/last.png" class="last">
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
</select>
</form>
</div>
</body>
</html>
Please help me...

Resize table with rowspan

The problem arises when using this script with not standard tables that use rowspan.
Look second table on resize.
jsfiddle
<table class="table2 responsive">
<tbody>
<tr>
<th rowspan="2">name</th>
<th colspan="3">1</th>
<th rowspan="2">5</th>
<th colspan="2">6</th>
<th rowspan="2">9</th>
<th rowspan="2">10</th>
<th rowspan="2">11</th>
<th rowspan="2">12</th>
<th rowspan="2">13</th>
<th rowspan="2">14</th>
</tr>
<tr>
<th>2</th>
<th>3</th>
<th>4</th>
<th>7</th>
<th>8</th>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
I would appreciate any help. Thank you.

copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none");
it jumps over the cell so it is not hidden and the hidden is not shown.
For test you can manually add display:none and remove display:none it should work like you want.

Develop Reference

JavaScript is the programming language of the Web.

Freezing first row while highlighting row and column - javascript

Related

How to design a Table with a fixed header during printing without cutting the header?

Align columns from tbody under their column title in thead

Footable Sorting by incomplete line

Want to Improve code functionality for Pagination in Jquery

Resize table with rowspan

Categories

Resources