Установка первого элемента li исправлена ​​и должна иметь ту же компоновку, что и неизмененный элемент li

Question

Я обнаружил, что первый элемент <li> можно установить на position: fixed;, чтобы он не прокручивался с другими элементами link . Если я сделаю это, компоновка этого элемента будет нарушена, а именно второй li будет перекрываться с первым.

Нефиксированное состояние

Фиксированное состояние

Как видно на скриншоте, все элементы смещены влево и больше не проходить соответствующую таблицу. Как я могу добиться, чтобы этот первый элемент был зафиксирован и правильно расположен?

Вот код из моего примера:

div {
 display: block
}
ul {
 display: table
}
li:first-child {
 position: fixed
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div style="-webkit-font-smoothing: antialiased;-webkit-box-direction: normal;overflow: auto;">
    <ul style="-webkit-font-smoothing: antialiased;-webkit-box-direction: normal;box-sizing: inherit;display: table;width: 100%;list-style: none;">
        <li style="-webkit-box-direction: normal;box-sizing: inherit;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;box-sizing: inherit;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">Tags</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">Session ID</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">Session Start</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">Session End</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">Provider</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">Stats</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">Actions</span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
        <li style="-webkit-box-direction: normal;display: table-row;vertical-align: middle;">
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">lock_open</i>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">efe5158d-f077-4d79-bddb-760559318d9a</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:48:49.929Z">21.1.2020 20:48:49</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;"><time datetime="2020-01-21T19:49:12.506Z">21.1.2020 20:49:12</time></span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">asdjndfg</span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <span>12 /</span>
                <span>0 /</span>
                <span>1</span>
            </span>
            <span style="-webkit-box-direction: normal;display: table-cell;vertical-align: middle;">
                <i class="material-icons">radio_button_unchecked</i>
                <a><i class="material-icons">play_circle_outline</i></a>
                <i class="material-icons">play_for_work</i>
                <i class="material-icons">info</i>
            </span>
        </li>
    </ul>
</div>