IE11 In an attempt to put css tag fixed, theny that it's not working here, and I'm broken by the table.
-
Anyway, I have a table that should be launched from the browser of the vinform and the point. The table should contain a chemical and a left pole in the scrub, the CSS hider has a sticky tag, but there's no such a current in the browser, there's only a fixed, but it breaks tablesy. I'm putting it on. You can test that in the chrome this table works. But IE11 isn't. Kak, you can see, I tried to connect the libu stickybits, but I couldn't handle it. Help me. I'd like a slash code. And please don't send any more references, I've looked at a lot of resources, but the problem has never been fixed. The table is not mine.
<html><head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script src="stickybits.min.js"></script>
<script>stickybits(".tgHeader", { useStickyClasses: true });</script>
<style type="text/css">
/* table style */
table { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; } /*#customers td, #customers th {*/ td, th { border: 1px solid #ddd; padding: 8px; vertical-align:top; background-color: white; } .tgHeader th{ background-color: #00aedb; } thead th{ background-color: #00aedb !important; font-weight: bold; text-align: center; } tr:nth-child(n):hover td { background: #eee; } /* collaps table rows */ tr.tgHeader { font-weight: bold; cursor: pointer; background-color: #00aedb !important; } th.tgHeader{ text-align: center !important; } .tgHeaderExtended{ background-color: #00aedb !important; z-index: 0 !important; } .tgHeader .sign:after { content: "-"; display: inline-block; } .tgHeader.expand .sign:after { content: "+"; } .tgHeader{ z-index: 2; } /* table freeze 1 column and header table */ table thead { padding: 3px; position: sticky; top: 0; z-index: 2; } table td { padding: 4px 5px; } table tbody { position: relative; } table thead th:nth-child(1) { position: sticky; left: 0; z-index: 2; } table tbody th { position: sticky; left: 0; z-index: 1; }</style>
<script type="text/javascript">
/* table freeze 1 column and header table */ $(document).ready(function() { /*$('tbody').scroll(function(e) { $('thead').css("left", -$("tbody").scrollLeft()); $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); });*/ /* collaps table rows */ $('.tgHeader').click(function(){ $(this).toggleClass('expand').nextUntil('tr.tgHeader').slideToggle(100); }); });</script>
<script src="stickybits.min.js"></script>
<script>stickybits('.tgHeader');</script>
</head>
<body>
<table> <thead> <tr> <th>Текст</th><th>233</th><th>232</th><th>231</th> </tr><tr class="tgHeader"> <th>Текст </th><td><table> <tr> <td>Текст</td><td>Текст</td><td>Текст</td><td>Текст</td><td>Текст</td> </tr><tr> <td>Текст</td><td>100</td><td>Текст</td><td>123</td><td>12355</td> </tr><tr> <td>Текст</td><td>5</td><td>321</td><td>123</td><td>T20154</td> </tr><tr> <td>Текст</td><td>27,222</td><td>12313</td><td>321</td><td>0001</td> </tr></table></td><td><table>
<tr> <td>Текст</td><td>Текст</td><td>Текст</td><td>Дата отбора</td><td>Текст</td> </tr></table></td><td><table>
<tr> <td>Текст</td><td>Текст</td><td>Текст</td><td>Текст</td><td>Текст</td> </tr></table></td>
</tr> </thead><tbody> <tr class="tgHeader"> <th><span class="sign"></span> Заголовок </th><th class="tgHeaderExtended" colspan="5"></th> </tr><tr> <th>Текст </th><td>2 Текст</td><td>2 Текст</td><td>2 Текст</td> </tr><tr> <th>Текст</th><td>Текст</td><td>Текст</td><td>Текст</td> </tr><tr> <th>Текст</th><td>Текст 12</td><td>Текст 12</td><td>Текст 12</td> </tr><tr> <th>Текст</th><td>12-4</td><td>12-4</td><td>12-4</td> </tr><tr> <th>Текст</th><td>Текст</td><td>Текст</td><td>Текст</td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td>Текста</td><td>Текст</td><td>Текст</td> </tr><tr> <th>Текст</th><td>2</td><td></td><td></td> </tr><tr> <th>Текст</th><td>0,661</td><td></td><td></td> </tr><tr> <th>Текст</th><td>0,272</td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr> <th>Текст </th><td>Текст</td><td>Текст</td><td>Текст</td> </tr><tr> <th>Текст </th><td>Текст</td><td>Текст</td><td>Текст</td> </tr><tr class="tgHeader"> <th><span class="sign"></span> Заголовок</th><th class="tgHeaderExtended" colspan="4"></th> </tr><tr> <th>Текст </th><td></td><td></td><td></td> </tr><tr> <th>Текст </th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr class="tgHeader"> <th><span class="sign"></span> Заголовок</th><th class="tgHeaderExtended" colspan="4"></th> </tr><tr> <th>Текст </th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr class="tgHeader"> <th><span class="sign"></span> Заголовок</th><th class="tgHeaderExtended" colspan="4"></th> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td></td><td></td> </tr><tr> <th>Текст</th><td></td><td><table> <tr> <td>Текст</td><td>↑</td><td>↓</td><td>Текст</td><td>Текст</td> </tr><tr> <td>300</td><td>0</td><td>0</td><td>0</td><td>0</td> </tr><tr> <td>200</td><td>0</td><td>0</td><td>0</td><td>0</td> </tr><tr> <td>100</td><td>0</td><td>0</td><td>0</td><td>0</td> </tr><tr> <td>60</td><td>0</td><td>0</td><td>0</td><td>0</td> </tr><tr> <td>30</td><td>0</td><td>0</td><td>0</td><td>0</td> </tr><tr> <td>6</td><td>0</td><td>0</td><td>0</td><td>0</td> </tr><tr> <td>3</td><td>0</td><td>0</td><td>0</td><td>0</td> </tr></table></td><td><table>
<tr> <td>Текст</td><td>↑</td><td>↓</td><td>Текст</td><td>Текст</td> </tr><tr> <td>300</td><td>0</td><td>0</td><td>0</td><td>0</td> </tr><tr> <td>200</td><td>0</td><td>0</td><td>0</td><td>0</td> </tr><tr> <td>100</td><td>0</td><td>0</td><td>0</td><td>0</td> </tr><tr> <td>60</td><td>0</td><td>0</td><td>0</td><td>0</td> </tr><tr> <td>30</td><td>0</td><td>0</td><td>0</td><td>0</td> </tr><tr> <td>6</td><td>0</td><td>0</td><td>0</td><td>0</td> </tr><tr> <td>3</td><td>0</td><td>0</td><td>0</td><td>0</td> </tr></table></td>
</tr> </tbody></table></body> </html>
-
I tried to write a logic, but... It doesn't work with the transition parameter. in css/js.
const navigation = document.querySelector('.menu');const getMatrix = (selector, lastIndex) => {
const transform = window
.getComputedStyle(selector, null)
.getPropertyValue('transform');
const dataTransform = transform.match(/-?\d+.?\d+|\d+/g);
return +dataTransform[dataTransform.length - lastIndex];
};const { offsetTop } = navigation;
const savaPos = getMatrix(navigation, 1);
window.addEventListener(
'scroll',
() => {
const doc =
(document.documentElement && document.documentElement.scrollTop) ||
document.body.scrollTop;
if (navigation.classList.contains('s') && doc >= savaPos) return;
else if (doc >= offsetTop && doc >= savaPos) {
navigation.classList.add('s');
} else if (doc <= savaPos) {
navigation.classList.remove('s');
}
},
{ passive: true }
);.menu {
display: flex;
transform: translateY(100px);
padding: 15px;
background-color: #14151a;
/* transition: all 0.3s; */
}.s {
position: fixed;
transform: translateY(0);
top: 0;
width: 100%;
height: auto;
}
