not worked position sticky in table thead

Question

position is sticky and overflow-x is scroll : plan - space - trafic until the 20 Property

also i want position is sticky : plan 1 - plan 2 - plan 3 - plan 4 - plan 5 until the plan 20

add code css :

table.shop_table.linux-host thead th { position: sticky; top: 0; }

but not worked !

     <style>
    table.shop_table.linux-host { display: block; position: relative; overflow-x: scroll; margin-top: 5px; } 
    table.shop_table.linux-host thead th:first-child, table.shop_table.linux-host tbody th { display: block; right: 0; position: sticky; z-index: 1; } 
    table.shop_table.linux-host th, table.shop_table.linux-host td { min-width: 150px; }</style>
            <table class="shop_table linux-host">
                <thead>
                    <tr>
                        <th>plan</th>
                        <th>plan 1</th>
                        <th>plan 2</th>
                        <th>plan 3</th>
                        <th>plan 4</th>
                        <th>plan 5</th>
                       <th>until the plan 20</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>space</th>
                        <td>1 gig</td>
                        <td>2 gig</td>
                        <td>3 gig</td>
                        <td>4 gig</td>
                        <td>5 gig</td>
                        <td>until the 20 gig</td>
                    </tr>
                    <tr>
                        <th>trafic</th>
                        <td>ultimated</td>
                        <td>ultimated</td>
                        <td>ultimated</td>
                        <td>ultimated</td>
                        <td>ultimated</td>
                        <td>until the 20 ultimated</td>
                    </tr>
                </tbody>
            </table>

If you do not understand my questions, let me know and I will explain more

Answer 1

Try this:-

table { border-collapse: collapse; width: 100%; }
th, td { background: #fff; padding: 8px 16px; }


.tableFixHead {
  overflow: auto;
  height: 100px;
}

.tableFixHead thead th {
  position: sticky;
  top: 0;
}

<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>