Conseguir Que El Thead De La Tabla Se Quede Stycky - PullRequest
0 голосов
/ 20 марта 2020

Я пытаюсь сделать таблицу липкой как в первом ряду, так и в первом столбце. Но я не могу заставить thead придерживаться, когда это прокручивается. Я нахожусь на ioni c 3. Я перепробовал много вещей и почти все связанные учебники по inte rnet, но я не могу закончить sh это, я думаю, это потому, что какое-то совпадение с вертикалью свиток Кто знает как за этим следить? Кто-нибудь знает, как получить его, используя CSS?

 th,td {
        padding: 0.25rem;
    }
    th {
        background: white;
        position: sticky;
        top: 0;
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    }


    .zui-table {
        border: none;
        border-collapse: separate;
        border-spacing: 0;
        font: normal 13px Arial, sans-serif;
    }

    .zui-table thead th {
        border: none;
        color: rgb(0, 0, 0);
        padding: 10px;
        text-align: left;
        white-space: nowrap;
    }

    .zui-table tbody td {
        color: #333;
        padding: 10px;
        text-shadow: 1px 1px 1px #fff;
        white-space: nowrap;
    }

    .zui-wrapper {
        position: relative;
    }

    .zui-scroller {
        margin-left: 48.9vw;
        overflow-x: scroll;
        overflow-y: visible;
        padding-bottom: 5px;
        width: 40vw;
    }

    .zui-table .zui-sticky-col {
        background: rgb(255, 255, 255);
        background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 72%, rgba(213, 213, 213, 1) 72%, rgba(255, 255, 255, 1) 100%);
        left: 0;
        position: absolute;
        top: auto;
        width: 53%;
    }
<div class="zui-wrapper">
        <div class="zui-scroller">
          <table class="zui-table" id="header-fixed" id="header-fixed">
            <thead style="position: sticky;" id="demo">
              <tr class="red">
                <th class="zui-sticky-col" style="color: black; background-color: rgb(167, 167, 167)!important">Name</th>
                <th>Number</th>
                <th>Position</th>
                <th>Height</th>
                <th>Born</th>
                <th>Salary</th>
                <th>Prior to NBA/Country</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="zui-sticky-col">DeMarcus Cousins</td>
                <td>15</td>
                <td>C</td>
                <td>6'11"</td>
                <td>08-13-1990</td>
                <td>$4,917,000</td>
                <td>Kentucky/USA</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...