How to solve IE 10 + & IE Edge flickering scroll issue
0
I want a simple responsive fixed header table.
I almost created a fixed header table, but there is a flickering issue in IE 10+ & IE Edge. Please help me to resolve the issue.
Is it possible with this much of code??
Here is the code
Expected Result: Freeze header while scrolling without any flickering or jump
Browser Support - IE 10+
HTML
$(".custom-table-scroll").scroll(function() {
$('.freeze-top').css({
transform: 'translateY(' + 1 * this.scrollTop + 'px)'
});
});body {
width: 100%;
filter: grayscale(0%);
}
.container {
/*max-width: 820px;*/
margin: 20px;
}
.custom-table-wrap {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.custom-table-wrap .custom-table-scroll {
width: 100%;
overflow: auto;
max-height: 400px;
}
.custom-table-wrap.has-freezing {
overflow: hidden;
}
.custom-table-wrap.has-freezing .freeze-left,
.custom-table-wrap.has-freezing .freeze-right {
z-index: 10;
background: red !important;
color: #fff;
}
.custom-table-wrap.has-freezing .freeze-top {
z-index: 11;
}
.custom-table-wrap.has-freezing .freeze-top.freeze-left,
.custom-table-wrap.has-freezing .freeze-top.freeze-right {
z-index: 12;
}
.custom-table-wrap.has-freezing .freeze-both {
z-index: 13;
background: blue;
}
/* Default Table Style */
.custom-table {
color: #333;
background: white;
font-size: 12pt;
margin: 0 auto;
width: 100%;
border: none;
border-spacing: 0;
border-collapse: separate;
opacity: .8;
position: relative;
}
.custom-table th,
.custom-table td {
padding: 4px 8px;
min-width: 100px;
height: 36px;
word-wrap: break-word;
font-size: 13px;
line-height: normal;
}
.custom-table th {
color: #fff;
background: #6F7E95;
position: relative;
font-weight: 600;
}
.custom-table td {
font-weight: 500;
}
.custom-table tr.disabled-user td {
font-style: italic;
color: rgba(53, 65, 79, 0.5);
}
.custom-table tr.disabled-user td .profile-img {
opacity: .5;
}
.custom-table.striped tr:nth-child(odd) td {
background-color: #fff;
}
.custom-table.striped tr:nth-child(even) td {
background-color: #e6f1f1;
}
.custom-table.bordered th,
.custom-table.bordered td {
border-bottom: 1px solid #8F939E;
border-right: 1px solid #8F939E;
}
.custom-table.bordered td {
border-color: #6F7E95;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<span id="current"></span>
<div class="custom-table-wrap has-freezing">
<div class="custom-table-scroll">
<table class="custom-table striped">
<thead>
<tr>
<th class="freeze-top">Col 1</th>
<th class="freeze-top">Col 2</th>
<th class="freeze-top">Col 3</th>
<th class="freeze-top">Col 4</th>
<th class="freeze-top">Col 5</th>
<th class="freeze-top">Col 6</th>
<th class="freeze-top">Col 7</th>
<th class="freeze-top">asdsdddddddd</th>
<th class="freeze-top">Col 9</th>
<th class="freeze-top">Col 13</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr>
<td colspan="10">Well anything that happens on scrolling like that is JS related so I will push this over there..</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
</tbody>
</table>
</div>
</div>jquery html css
edited Nov 14 '18 at 6:21
Manish Patel
3,2591721
asked Nov 14 '18 at 6:18
Prajith SNPrajith SN
2218
add a comment |
0
I want a simple responsive fixed header table.
I almost created a fixed header table, but there is a flickering issue in IE 10+ & IE Edge. Please help me to resolve the issue.
Is it possible with this much of code??
Here is the code
Expected Result: Freeze header while scrolling without any flickering or jump
Browser Support - IE 10+
HTML
$(".custom-table-scroll").scroll(function() {
$('.freeze-top').css({
transform: 'translateY(' + 1 * this.scrollTop + 'px)'
});
});body {
width: 100%;
filter: grayscale(0%);
}
.container {
/*max-width: 820px;*/
margin: 20px;
}
.custom-table-wrap {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.custom-table-wrap .custom-table-scroll {
width: 100%;
overflow: auto;
max-height: 400px;
}
.custom-table-wrap.has-freezing {
overflow: hidden;
}
.custom-table-wrap.has-freezing .freeze-left,
.custom-table-wrap.has-freezing .freeze-right {
z-index: 10;
background: red !important;
color: #fff;
}
.custom-table-wrap.has-freezing .freeze-top {
z-index: 11;
}
.custom-table-wrap.has-freezing .freeze-top.freeze-left,
.custom-table-wrap.has-freezing .freeze-top.freeze-right {
z-index: 12;
}
.custom-table-wrap.has-freezing .freeze-both {
z-index: 13;
background: blue;
}
/* Default Table Style */
.custom-table {
color: #333;
background: white;
font-size: 12pt;
margin: 0 auto;
width: 100%;
border: none;
border-spacing: 0;
border-collapse: separate;
opacity: .8;
position: relative;
}
.custom-table th,
.custom-table td {
padding: 4px 8px;
min-width: 100px;
height: 36px;
word-wrap: break-word;
font-size: 13px;
line-height: normal;
}
.custom-table th {
color: #fff;
background: #6F7E95;
position: relative;
font-weight: 600;
}
.custom-table td {
font-weight: 500;
}
.custom-table tr.disabled-user td {
font-style: italic;
color: rgba(53, 65, 79, 0.5);
}
.custom-table tr.disabled-user td .profile-img {
opacity: .5;
}
.custom-table.striped tr:nth-child(odd) td {
background-color: #fff;
}
.custom-table.striped tr:nth-child(even) td {
background-color: #e6f1f1;
}
.custom-table.bordered th,
.custom-table.bordered td {
border-bottom: 1px solid #8F939E;
border-right: 1px solid #8F939E;
}
.custom-table.bordered td {
border-color: #6F7E95;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<span id="current"></span>
<div class="custom-table-wrap has-freezing">
<div class="custom-table-scroll">
<table class="custom-table striped">
<thead>
<tr>
<th class="freeze-top">Col 1</th>
<th class="freeze-top">Col 2</th>
<th class="freeze-top">Col 3</th>
<th class="freeze-top">Col 4</th>
<th class="freeze-top">Col 5</th>
<th class="freeze-top">Col 6</th>
<th class="freeze-top">Col 7</th>
<th class="freeze-top">asdsdddddddd</th>
<th class="freeze-top">Col 9</th>
<th class="freeze-top">Col 13</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr>
<td colspan="10">Well anything that happens on scrolling like that is JS related so I will push this over there..</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
</tbody>
</table>
</div>
</div>jquery html css
edited Nov 14 '18 at 6:21
Manish Patel
3,2591721
asked Nov 14 '18 at 6:18
Prajith SNPrajith SN
2218
Have you tried-ms-transform?
– Viira
Nov 14 '18 at 6:28
@Viira No. But am not sure that will fix the flickering issue in IE edge
– Prajith SN
Nov 15 '18 at 4:41
add a comment |
0
0
0
I want a simple responsive fixed header table.
I almost created a fixed header table, but there is a flickering issue in IE 10+ & IE Edge. Please help me to resolve the issue.
Is it possible with this much of code??
Here is the code
Expected Result: Freeze header while scrolling without any flickering or jump
Browser Support - IE 10+
HTML
$(".custom-table-scroll").scroll(function() {
$('.freeze-top').css({
transform: 'translateY(' + 1 * this.scrollTop + 'px)'
});
});body {
width: 100%;
filter: grayscale(0%);
}
.container {
/*max-width: 820px;*/
margin: 20px;
}
.custom-table-wrap {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.custom-table-wrap .custom-table-scroll {
width: 100%;
overflow: auto;
max-height: 400px;
}
.custom-table-wrap.has-freezing {
overflow: hidden;
}
.custom-table-wrap.has-freezing .freeze-left,
.custom-table-wrap.has-freezing .freeze-right {
z-index: 10;
background: red !important;
color: #fff;
}
.custom-table-wrap.has-freezing .freeze-top {
z-index: 11;
}
.custom-table-wrap.has-freezing .freeze-top.freeze-left,
.custom-table-wrap.has-freezing .freeze-top.freeze-right {
z-index: 12;
}
.custom-table-wrap.has-freezing .freeze-both {
z-index: 13;
background: blue;
}
/* Default Table Style */
.custom-table {
color: #333;
background: white;
font-size: 12pt;
margin: 0 auto;
width: 100%;
border: none;
border-spacing: 0;
border-collapse: separate;
opacity: .8;
position: relative;
}
.custom-table th,
.custom-table td {
padding: 4px 8px;
min-width: 100px;
height: 36px;
word-wrap: break-word;
font-size: 13px;
line-height: normal;
}
.custom-table th {
color: #fff;
background: #6F7E95;
position: relative;
font-weight: 600;
}
.custom-table td {
font-weight: 500;
}
.custom-table tr.disabled-user td {
font-style: italic;
color: rgba(53, 65, 79, 0.5);
}
.custom-table tr.disabled-user td .profile-img {
opacity: .5;
}
.custom-table.striped tr:nth-child(odd) td {
background-color: #fff;
}
.custom-table.striped tr:nth-child(even) td {
background-color: #e6f1f1;
}
.custom-table.bordered th,
.custom-table.bordered td {
border-bottom: 1px solid #8F939E;
border-right: 1px solid #8F939E;
}
.custom-table.bordered td {
border-color: #6F7E95;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<span id="current"></span>
<div class="custom-table-wrap has-freezing">
<div class="custom-table-scroll">
<table class="custom-table striped">
<thead>
<tr>
<th class="freeze-top">Col 1</th>
<th class="freeze-top">Col 2</th>
<th class="freeze-top">Col 3</th>
<th class="freeze-top">Col 4</th>
<th class="freeze-top">Col 5</th>
<th class="freeze-top">Col 6</th>
<th class="freeze-top">Col 7</th>
<th class="freeze-top">asdsdddddddd</th>
<th class="freeze-top">Col 9</th>
<th class="freeze-top">Col 13</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr>
<td colspan="10">Well anything that happens on scrolling like that is JS related so I will push this over there..</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
</tbody>
</table>
</div>
</div>jquery html css
edited Nov 14 '18 at 6:21
Manish Patel
3,2591721
asked Nov 14 '18 at 6:18
Prajith SNPrajith SN
2218
I want a simple responsive fixed header table.
I almost created a fixed header table, but there is a flickering issue in IE 10+ & IE Edge. Please help me to resolve the issue.
Is it possible with this much of code??
Here is the code
Expected Result: Freeze header while scrolling without any flickering or jump
Browser Support - IE 10+
HTML
$(".custom-table-scroll").scroll(function() {
$('.freeze-top').css({
transform: 'translateY(' + 1 * this.scrollTop + 'px)'
});
});body {
width: 100%;
filter: grayscale(0%);
}
.container {
/*max-width: 820px;*/
margin: 20px;
}
.custom-table-wrap {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.custom-table-wrap .custom-table-scroll {
width: 100%;
overflow: auto;
max-height: 400px;
}
.custom-table-wrap.has-freezing {
overflow: hidden;
}
.custom-table-wrap.has-freezing .freeze-left,
.custom-table-wrap.has-freezing .freeze-right {
z-index: 10;
background: red !important;
color: #fff;
}
.custom-table-wrap.has-freezing .freeze-top {
z-index: 11;
}
.custom-table-wrap.has-freezing .freeze-top.freeze-left,
.custom-table-wrap.has-freezing .freeze-top.freeze-right {
z-index: 12;
}
.custom-table-wrap.has-freezing .freeze-both {
z-index: 13;
background: blue;
}
/* Default Table Style */
.custom-table {
color: #333;
background: white;
font-size: 12pt;
margin: 0 auto;
width: 100%;
border: none;
border-spacing: 0;
border-collapse: separate;
opacity: .8;
position: relative;
}
.custom-table th,
.custom-table td {
padding: 4px 8px;
min-width: 100px;
height: 36px;
word-wrap: break-word;
font-size: 13px;
line-height: normal;
}
.custom-table th {
color: #fff;
background: #6F7E95;
position: relative;
font-weight: 600;
}
.custom-table td {
font-weight: 500;
}
.custom-table tr.disabled-user td {
font-style: italic;
color: rgba(53, 65, 79, 0.5);
}
.custom-table tr.disabled-user td .profile-img {
opacity: .5;
}
.custom-table.striped tr:nth-child(odd) td {
background-color: #fff;
}
.custom-table.striped tr:nth-child(even) td {
background-color: #e6f1f1;
}
.custom-table.bordered th,
.custom-table.bordered td {
border-bottom: 1px solid #8F939E;
border-right: 1px solid #8F939E;
}
.custom-table.bordered td {
border-color: #6F7E95;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<span id="current"></span>
<div class="custom-table-wrap has-freezing">
<div class="custom-table-scroll">
<table class="custom-table striped">
<thead>
<tr>
<th class="freeze-top">Col 1</th>
<th class="freeze-top">Col 2</th>
<th class="freeze-top">Col 3</th>
<th class="freeze-top">Col 4</th>
<th class="freeze-top">Col 5</th>
<th class="freeze-top">Col 6</th>
<th class="freeze-top">Col 7</th>
<th class="freeze-top">asdsdddddddd</th>
<th class="freeze-top">Col 9</th>
<th class="freeze-top">Col 13</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr>
<td colspan="10">Well anything that happens on scrolling like that is JS related so I will push this over there..</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
</tbody>
</table>
</div>
</div>$(".custom-table-scroll").scroll(function() {
$('.freeze-top').css({
transform: 'translateY(' + 1 * this.scrollTop + 'px)'
});
});body {
width: 100%;
filter: grayscale(0%);
}
.container {
/*max-width: 820px;*/
margin: 20px;
}
.custom-table-wrap {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.custom-table-wrap .custom-table-scroll {
width: 100%;
overflow: auto;
max-height: 400px;
}
.custom-table-wrap.has-freezing {
overflow: hidden;
}
.custom-table-wrap.has-freezing .freeze-left,
.custom-table-wrap.has-freezing .freeze-right {
z-index: 10;
background: red !important;
color: #fff;
}
.custom-table-wrap.has-freezing .freeze-top {
z-index: 11;
}
.custom-table-wrap.has-freezing .freeze-top.freeze-left,
.custom-table-wrap.has-freezing .freeze-top.freeze-right {
z-index: 12;
}
.custom-table-wrap.has-freezing .freeze-both {
z-index: 13;
background: blue;
}
/* Default Table Style */
.custom-table {
color: #333;
background: white;
font-size: 12pt;
margin: 0 auto;
width: 100%;
border: none;
border-spacing: 0;
border-collapse: separate;
opacity: .8;
position: relative;
}
.custom-table th,
.custom-table td {
padding: 4px 8px;
min-width: 100px;
height: 36px;
word-wrap: break-word;
font-size: 13px;
line-height: normal;
}
.custom-table th {
color: #fff;
background: #6F7E95;
position: relative;
font-weight: 600;
}
.custom-table td {
font-weight: 500;
}
.custom-table tr.disabled-user td {
font-style: italic;
color: rgba(53, 65, 79, 0.5);
}
.custom-table tr.disabled-user td .profile-img {
opacity: .5;
}
.custom-table.striped tr:nth-child(odd) td {
background-color: #fff;
}
.custom-table.striped tr:nth-child(even) td {
background-color: #e6f1f1;
}
.custom-table.bordered th,
.custom-table.bordered td {
border-bottom: 1px solid #8F939E;
border-right: 1px solid #8F939E;
}
.custom-table.bordered td {
border-color: #6F7E95;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<span id="current"></span>
<div class="custom-table-wrap has-freezing">
<div class="custom-table-scroll">
<table class="custom-table striped">
<thead>
<tr>
<th class="freeze-top">Col 1</th>
<th class="freeze-top">Col 2</th>
<th class="freeze-top">Col 3</th>
<th class="freeze-top">Col 4</th>
<th class="freeze-top">Col 5</th>
<th class="freeze-top">Col 6</th>
<th class="freeze-top">Col 7</th>
<th class="freeze-top">asdsdddddddd</th>
<th class="freeze-top">Col 9</th>
<th class="freeze-top">Col 13</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr>
<td colspan="10">Well anything that happens on scrolling like that is JS related so I will push this over there..</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
</tbody>
</table>
</div>
</div>$(".custom-table-scroll").scroll(function() {
$('.freeze-top').css({
transform: 'translateY(' + 1 * this.scrollTop + 'px)'
});
});body {
width: 100%;
filter: grayscale(0%);
}
.container {
/*max-width: 820px;*/
margin: 20px;
}
.custom-table-wrap {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.custom-table-wrap .custom-table-scroll {
width: 100%;
overflow: auto;
max-height: 400px;
}
.custom-table-wrap.has-freezing {
overflow: hidden;
}
.custom-table-wrap.has-freezing .freeze-left,
.custom-table-wrap.has-freezing .freeze-right {
z-index: 10;
background: red !important;
color: #fff;
}
.custom-table-wrap.has-freezing .freeze-top {
z-index: 11;
}
.custom-table-wrap.has-freezing .freeze-top.freeze-left,
.custom-table-wrap.has-freezing .freeze-top.freeze-right {
z-index: 12;
}
.custom-table-wrap.has-freezing .freeze-both {
z-index: 13;
background: blue;
}
/* Default Table Style */
.custom-table {
color: #333;
background: white;
font-size: 12pt;
margin: 0 auto;
width: 100%;
border: none;
border-spacing: 0;
border-collapse: separate;
opacity: .8;
position: relative;
}
.custom-table th,
.custom-table td {
padding: 4px 8px;
min-width: 100px;
height: 36px;
word-wrap: break-word;
font-size: 13px;
line-height: normal;
}
.custom-table th {
color: #fff;
background: #6F7E95;
position: relative;
font-weight: 600;
}
.custom-table td {
font-weight: 500;
}
.custom-table tr.disabled-user td {
font-style: italic;
color: rgba(53, 65, 79, 0.5);
}
.custom-table tr.disabled-user td .profile-img {
opacity: .5;
}
.custom-table.striped tr:nth-child(odd) td {
background-color: #fff;
}
.custom-table.striped tr:nth-child(even) td {
background-color: #e6f1f1;
}
.custom-table.bordered th,
.custom-table.bordered td {
border-bottom: 1px solid #8F939E;
border-right: 1px solid #8F939E;
}
.custom-table.bordered td {
border-color: #6F7E95;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<span id="current"></span>
<div class="custom-table-wrap has-freezing">
<div class="custom-table-scroll">
<table class="custom-table striped">
<thead>
<tr>
<th class="freeze-top">Col 1</th>
<th class="freeze-top">Col 2</th>
<th class="freeze-top">Col 3</th>
<th class="freeze-top">Col 4</th>
<th class="freeze-top">Col 5</th>
<th class="freeze-top">Col 6</th>
<th class="freeze-top">Col 7</th>
<th class="freeze-top">asdsdddddddd</th>
<th class="freeze-top">Col 9</th>
<th class="freeze-top">Col 13</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr>
<td colspan="10">Well anything that happens on scrolling like that is JS related so I will push this over there..</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
<tr class="duplicate">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
<td>Col 8</td>
<td>Col 9</td>
<td>Col 13</td>
</tr>
</tbody>
</table>
</div>
</div>jquery html css
jquery html css
edited Nov 14 '18 at 6:21
Manish Patel
3,2591721
asked Nov 14 '18 at 6:18
Prajith SNPrajith SN
2218
edited Nov 14 '18 at 6:21
Manish Patel
3,2591721
asked Nov 14 '18 at 6:18
Prajith SNPrajith SN
2218
edited Nov 14 '18 at 6:21
Manish Patel
3,2591721
edited Nov 14 '18 at 6:21
Manish Patel
3,2591721
edited Nov 14 '18 at 6:21
Manish Patel
3,2591721
3,2591721
asked Nov 14 '18 at 6:18
Prajith SNPrajith SN
2218
asked Nov 14 '18 at 6:18
Prajith SNPrajith SN
2218
asked Nov 14 '18 at 6:18
Prajith SNPrajith SN
2218
2218
Have you tried-ms-transform?
– Viira
Nov 14 '18 at 6:28
@Viira No. But am not sure that will fix the flickering issue in IE edge
– Prajith SN
Nov 15 '18 at 4:41
add a comment |
Have you tried-ms-transform?
– Viira
Nov 14 '18 at 6:28
@Viira No. But am not sure that will fix the flickering issue in IE edge
– Prajith SN
Nov 15 '18 at 4:41
Have you tried
-ms-transform ?– Viira
Nov 14 '18 at 6:28
Have you tried
-ms-transform ?– Viira
Nov 14 '18 at 6:28
@Viira No. But am not sure that will fix the flickering issue in IE edge
– Prajith SN
Nov 15 '18 at 4:41
@Viira No. But am not sure that will fix the flickering issue in IE edge
– Prajith SN
Nov 15 '18 at 4:41
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53294182%2fhow-to-solve-ie-10-ie-edge-flickering-scroll-issue%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53294182%2fhow-to-solve-ie-10-ie-edge-flickering-scroll-issue%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Have you tried
-ms-transform?– Viira
Nov 14 '18 at 6:28
@Viira No. But am not sure that will fix the flickering issue in IE edge
– Prajith SN
Nov 15 '18 at 4:41