顶部的表滚动器将表数据反转为总显示顶部，但要更改滚动条，其显示总在底部+也以相反的顺序上下移动键盘。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(document).ready(function() {
$('.table_fixed tbody').scroll(function(e) {
$('.table_fixed thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
$('.table_fixed thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
$('.table_fixed tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
});
});.table-degree thead tr th, .table-degree tbody tr td {
width: 250px;
}
table.table-hover > thead > tr > th {
border-bottom: 0px !important;
white-space: nowrap;
padding: 14px 10px 13px!Important;
}
table.table-hover > thead > tr > th {
border-bottom: 0px !important;
white-space: nowrap;
padding: 14px 10px 13px!Important;
}
.table-degree-scroll {
overflow-x: auto;
width: 100%;
clear: both;
float: left;
}
.sum_text {
display: block;
font-size: 12px;
}
.table-degree tbody tr td:first-child, .table-degree thead tr th:first-child {
text-align: left;
}
.degree-no {
font-size: 15px;
font-family: "roboto-medium";
display: block;
padding: 0px 2px;
width: 25%;
float: left;
}
.table-degree {
table-layout: fixed;
}
.table-main tr th, .sticky-thead tr th, .sticky-intersect tr th, .sticky-col thead tr th {
font-family: 'Arial-BoldMT';
font-weight: normal;
font-size: 16px;
color: #fff;
background: #0f0e41;
padding: 13px 10px 11px!Important;
border: 1px #fbfbfb solid;
border-top-color: rgb(251, 251, 251);
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: rgb(251, 251, 251);
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom: 0px #ffff solid !important;
white-space: pre;
}
.sticky-intersect tr th, .sticky-col thead tr th {
height: 67px;
}
.sticky-enabled tbody tr th.sticky-cell {
background: #fff !Important;
color: #373a3c;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
table.table-hover > thead > tr > th, .sticky-thead > thead > tr > th {
border-bottom: 0px !important;
white-space: nowrap;
padding: 14px 10px 13px!Important;
}
.degree_title {
font-size: 24px;
margin-bottom: 15px;
color: #000;
}
.container {
margin-bottom: 40px;
margin-top: 64px;
min-height: 700px;
}
table.table_fixed {
position: relative;
width: 100%;
overflow: hidden;
}
/*thead*/
table.table_fixed thead {
position: relative;
display: block; /*seperates the header from the body allowing it to be positioned*/
overflow: visible;
width: 100%;
}
table.table_fixed thead th {
min-width: 300px;
height: 70px;
}
table.table_fixed thead th:nth-child(1) {/*first cell in the header*/
position: relative;
display: table-cell; /*seperates the first cell in the header from the header*/
background: #0f0e41;
z-index: 1;
outline:1px #fbfbfb solid !Important;
}
table.table_fixed tbody {
position: relative;
display: block; /*seperates the tbody from the header*/
width: 100%;
height: 460px;
overflow:scroll;
}
table.table_fixed tbody td {
min-width: 300px;
}
table.table_fixed tbody tr td:nth-child(1) { /*the first cell in each tr*/
position: relative;
display: block; /*seperates the first column from the tbody*/
height: 46px;
background: #fff;
z-index: 1;
border-top: 1px red solid;
border-bottom: 0px red solid;
}
table.table_fixed tbody tr td {
border-bottom: 1px red solid;
}
table.table_fixed tbody{
width: 100%;
overflow-x: scroll;
overflow-y: scroll;
transform:rotateX(180deg);
}
table.table_fixed thead, table.table_fixed thead tr th, table.table_fixed tbody tr td {
transform:rotateX(180deg);
}<div class="table-scoller">
<table class="table table-hover table-main table-degree table_fixed" >
<thead>
<tr>
<th class="fixed-side" >Name</th>
<th class="headcol">User Totals<span class="sum_text">(Sum of 1<sup>st</sup> degree to n<sup>th</sup> degree)</span></th>
<th>1st Columns</th>
<th>2nd Columns</th>
<th>3rd Columns</th>
<th>4th Columns</th>
<th>5th Columns</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td data-label="Name" class="fixed-side">Total</td>
<td data-label="User Totals">
<span class="degree-gray degree-no">1</span>
<span class="degree-blue degree-no">133</span>
<span class="degree-green degree-no">140</span>
<span class="degree-black dgrrrrk degree-no">893</span>
</td>
<td data-label="1st degree">
<span class="degree-gray degree-no">1</span>
<span class="degree-blue degree-no">16</span>
<span class="degree-green degree-no">213</span>
<span class="degree-blac1 dgrrrrk degree-no">229</span>
</td>
<td data-label="2nd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">71</span>
<span class="degree-green degree-no">375</span>
<span class="degree-blac1 dgrrrrk degree-no">446</span>
</td>
<td data-label="3rd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">37</span>
<span class="degree-green degree-no">131</span>
<span class="degree-blac1 dgrrrrk degree-no">168</span>
</td>
<td data-label="4th degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">8</span>
<span class="degree-green degree-no">37</span>
<span class="degree-blac1 dgrrrrk degree-no">45</span>
</td>
<td data-label="5th degree" class="sticky-cell-opposite">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">1</span>
<span class="degree-green degree-no">4</span>
<span class="degree-blac1 dgrrrrk degree-no">5</span>
</td>
</tr>
<tr>
<td data-label="Name" class="fixed-side">Test user 1</td>
<td data-label="User Totals">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="1st degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="2nd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="3rd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="4th degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="5th degree" class="sticky-cell-opposite">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
</tr>
<tr>
<td data-label="Name" class="fixed-side">Test user 2</td>
<td data-label="User Totals">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="1st degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="2nd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="3rd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="4th degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="5th degree" class="sticky-cell-opposite">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
</tr>
<tr>
<td data-label="Name" class="fixed-side">Test user 3</td>
<td data-label="User Totals">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="1st degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="2nd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="3rd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="4th degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="5th degree" class="sticky-cell-opposite">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
</tr>
<tr>
<td data-label="Name" class="fixed-side">Test user 4</td>
<td data-label="User Totals">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">23</span>
<span class="degree-green degree-no">139</span>
<span class="degree-blac1 dgrrrrk degree-no">162</span>
</td>
<td data-label="1st degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">22</span>
<span class="degree-blac1 dgrrrrk degree-no">22</span>
</td>
<td data-label="2nd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">13</span>
<span class="degree-green degree-no">90</span>
<span class="degree-blac1 dgrrrrk degree-no">103</span>
</td>
<td data-label="3rd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">7</span>
<span class="degree-green degree-no">24</span>
<span class="degree-blac1 dgrrrrk degree-no">31</span>
</td>
<td data-label="4th degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">3</span>
<span class="degree-green degree-no">3</span>
<span class="degree-blac1 dgrrrrk degree-no">6</span>
</td>
<td data-label="5th degree" class="sticky-cell-opposite">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
</tr>
<tr>
<td data-label="Name" class="fixed-side">Test user 5</td>
<td data-label="User Totals">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">23</span>
<span class="degree-green degree-no">160</span>
<span class="degree-blac1 dgrrrrk degree-no">183</span>
</td>
<td data-label="1st degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">23</span>
<span class="degree-blac1 dgrrrrk degree-no">23</span>
</td>
<td data-label="2nd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">11</span>
<span class="degree-green degree-no">90</span>
<span class="degree-blac1 dgrrrrk degree-no">101</span>
</td>
<td data-label="3rd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">10</span>
<span class="degree-green degree-no">40</span>
<span class="degree-blac1 dgrrrrk degree-no">50</span>
</td>
<td data-label="4th degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">1</span>
<span class="degree-green degree-no">7</span>
<span class="degree-blac1 dgrrrrk degree-no">8</span>
</td>
<td data-label="5th degree" class="sticky-cell-opposite">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">1</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">1</span>
</td>
</tr>
<tr>
<td data-label="Name" class="fixed-side">Test user 6</td>
<td data-label="User Totals">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">1</span>
<span class="degree-green degree-no">13</span>
<span class="degree-blac1 dgrrrrk degree-no">14</span>
</td>
<td data-label="1st degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">6</span>
<span class="degree-blac1 dgrrrrk degree-no">6</span>
</td>
<td data-label="2nd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">7</span>
<span class="degree-blac1 dgrrrrk degree-no">7</span>
</td>
<td data-label="3rd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">1</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">1</span>
</td>
<td data-label="4th degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="5th degree" class="sticky-cell-opposite">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
</tr>
<tr>
<td data-label="Name" class="fixed-side">Test user 7</td>
<td data-label="User Totals">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">3</span>
<span class="degree-green degree-no">10</span>
<span class="degree-blac1 dgrrrrk degree-no">13</span>
</td>
<td data-label="1st degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">1</span>
<span class="degree-green degree-no">5</span>
<span class="degree-blac1 dgrrrrk degree-no">6</span>
</td>
<td data-label="2nd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">2</span>
<span class="degree-green degree-no">4</span>
<span class="degree-blac1 dgrrrrk degree-no">6</span>
</td>
<td data-label="3rd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">1</span>
<span class="degree-blac1 dgrrrrk degree-no">1</span>
</td>
<td data-label="4th degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="5th degree" class="sticky-cell-opposite">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
</tr>
<tr>
<td data-label="Name" class="fixed-side">Test user 8</td>
<td data-label="User Totals">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">6</span>
<span class="degree-green degree-no">28</span>
<span class="degree-blac1 dgrrrrk degree-no">34</span>
</td>
<td data-label="1st degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">2</span>
<span class="degree-green degree-no">14</span>
<span class="degree-blac1 dgrrrrk degree-no">16</span>
</td>
<td data-label="2nd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">3</span>
<span class="degree-green degree-no">12</span>
<span class="degree-blac1 dgrrrrk degree-no">15</span>
</td>
<td data-label="3rd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">1</span>
<span class="degree-green degree-no">2</span>
<span class="degree-blac1 dgrrrrk degree-no">3</span>
</td>
<td data-label="4th degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="5th degree" class="sticky-cell-opposite">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
</tr>
<tr>
<td data-label="Name" class="fixed-side">Test user 9</td>
<td data-label="User Totals" >
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">8</span>
<span class="degree-green degree-no">23</span>
<span class="degree-blac1 dgrrrrk degree-no">31</span>
</td>
<td data-label="1st degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">3</span>
<span class="degree-green degree-no">12</span>
<span class="degree-blac1 dgrrrrk degree-no">15</span>
</td>
<td data-label="2nd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">5</span>
<span class="degree-green degree-no">10</span>
<span class="degree-blac1 dgrrrrk degree-no">15</span>
</td>
<td data-label="3rd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">1</span>
<span class="degree-blac1 dgrrrrk degree-no">1</span>
</td>
<td data-label="4th degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="5th degree" class="sticky-cell-opposite">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
</tr>
<tr>
<td data-label="Name" class="fixed-side">Test user 10</td>
<td data-label="User Totals">
<span class="degree-gray degree-no">1</span>
<span class="degree-blue degree-no">11</span>
<span class="degree-green degree-no">52</span>
<span class="degree-blac1 dgrrrrk degree-no">63</span>
</td>
<td data-label="1st degree">
<span class="degree-gray degree-no">1</span>
<span class="degree-blue degree-no">1</span>
<span class="degree-green degree-no">18</span>
<span class="degree-blac1 dgrrrrk degree-no">19</span>
</td>
<td data-label="2nd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">7</span>
<span class="degree-green degree-no">13</span>
<span class="degree-blac1 dgrrrrk degree-no">20</span>
</td>
<td data-label="3rd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">3</span>
<span class="degree-green degree-no">15</span>
<span class="degree-blac1 dgrrrrk degree-no">18</span>
</td>
<td data-label="4th degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">5</span>
<span class="degree-blac1 dgrrrrk degree-no">5</span>
</td>
<td data-label="5th degree" class="sticky-cell-opposite">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">1</span>
<span class="degree-blac1 dgrrrrk degree-no">1</span>
</td>
</tr>
<tr>
<td data-label="Name" class="fixed-side">Test user 11</td>
<td data-label="User Totals">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">14</span>
<span class="degree-green degree-no">66</span>
<span class="degree-blac1 dgrrrrk degree-no">80</span>
</td>
<td data-label="1st degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">17</span>
<span class="degree-blac1 dgrrrrk degree-no">17</span>
</td>
<td data-label="2nd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">12</span>
<span class="degree-green degree-no">28</span>
<span class="degree-blac1 dgrrrrk degree-no">40</span>
</td>
<td data-label="3rd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">1</span>
<span class="degree-green degree-no">9</span>
<span class="degree-blac1 dgrrrrk degree-no">10</span>
</td>
<td data-label="4th degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">1</span>
<span class="degree-green degree-no">12</span>
<span class="degree-blac1 dgrrrrk degree-no">13</span>
</td>
<td data-label="5th degree" class="sticky-cell-opposite">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
</tr>
<tr>
<td data-label="Name" class="fixed-side">Test user 12</td>
<td data-label="User Totals">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">1</span>
<span class="degree-green degree-no">11</span>
<span class="degree-blac1 dgrrrrk degree-no">12</span>
</td>
<td data-label="1st degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">1</span>
<span class="degree-green degree-no">7</span>
<span class="degree-blac1 dgrrrrk degree-no">8</span>
</td>
<td data-label="2nd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">4</span>
<span class="degree-blac1 dgrrrrk degree-no">4</span>
</td>
<td data-label="3rd degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="4th degree">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
<td data-label="5th degree" class="sticky-cell-opposite">
<span class="degree-gray degree-no">0</span>
<span class="degree-blue degree-no">0</span>
<span class="degree-green degree-no">0</span>
<span class="degree-blac1 dgrrrrk degree-no">0</span>
</td>
</tr>
</tbody>
</table>
</div>