Làm thế nào để freeze table columns bằng css?

Mình muốn hỏi cách freeze columns, để các columns còn lại có thể scroll ngang được như google sheet https://support.google.com/docs/answer/54813?hl=en Lưu ý là khi set height cho table, nó vẫn phải scroll dọc được nữa (bow)

Mình có html thế này:

<table class="table">
   <caption>Optional table caption.</caption>
   <thead>
      <tr>
         <th>Rank</th>
         <th>First Name</th>
         <th>Last Name</th>
         <th>Username</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th scope="row">1</th>
         <td>Mark</td>
         <td>Otto</td>
         <td>@mdo</td>
      </tr>
      <tr>
         <th scope="row">2</th>
         <td>Jacob</td>
         <td>Thornton</td>
         <td>@fat</td>
      </tr>
      <tr>
         <th scope="row">3</th>
         <td>Larry</td>
         <td>the Bird</td>
         <td>@twitter</td>
      </tr>
   </tbody>
</table>

Mình muốn cố định cột Rank, còn 3 cột còn lại có thể scroll ngang được, giống như thế này: