Setting first li element fixed and to have same layout as the none fixed li element

Question

I have found that the first <li> element can be set to position: fixed; so that it does not scroll with other elements link. If I do this, the layout of this element will be broken, namely, the second li will overlap with the first.

Not fixed state

Fixed state

As you can see on the screenshot, all elements are moved to the left and no longer pass the corresponding table. How could I achieve that this first element is fixed and positioned correctly?

Here is the code from my example:

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>