Что нового?

Вопрос Фикс проблемы таблицы для IE11

balgarot
Be careful <3
balgarot
Начинающий
Статус
Оффлайн
Регистрация
24 Янв 2019
Сообщения
148
Реакции[?]
13
Поинты[?]
0
В общем, у меня есть таблица, которая должна запускаться из браузера винформ(эксплорер 11) и суть в чём. В таблице должен быть закреплён хидер и левый столбик при скролле, в тегах CSS хидеру присвоен тег sticky, но в этом браyзере нет такого тега, есть только fixеd, но он ломает таблицy. Kод прикладываю. Можете потестить, в хроме эта таблица работает. Но в IЕ11 нихyя. Kак вы можете заметить, я пытался подключить либу stickybits, но разобраться я с ней не смог. Помогите.

HTML: 
<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>
 
Войдите или зарегистрируйтесь для ответа.
Немного о главном
Полезные мелочи
О нас

Проект предоставляет различный материал, относящийся к сфере киберспорта, программирования, ПО для игр, а также позволяет его участникам общаться на многие другие темы. Почта для жалоб: admin@yougame.biz

Поделиться страницей
Сверху Снизу