当Bootstrap 4中的设备较小时，使表列固定

Question

我正在使用Bootstrap 4 Table制作表格。

<div class="col-12">
      <table class="table">
        <thead>
          <tr id="mes">
            <th scope="col">column 1</th>
            <th scope="col">column 2</th>
            <th scope="col">column 3</th>
            <th scope="col">column 4</th>
            <th scope="col">column 5</th>
            <th scope="col">column 6</th>
            <th scope="col">column 7</th>
            <th scope="col">column 8</th>
            <th scope="col">column 9</th>
            <th scope="col">column 10</th>

          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row" style="">Name 1</th>
            <td class="table-success">OKAY</td>
            <td class="table-success">OKAY</td>
            <td class="table-success">OKAY</td>
            <td class="table-success">OKAY</td>
            <td class="table-success">OKAY</td>
            <td class="table-success">OKAY</td>
          </tr>
          <tr>
            <th scope="row">Name 2</th>
          </tr>
          <tr>
            <th scope="row">Name 3</th>
          </tr>
          <tr>
            <th scope="row">Name 4</th>
            <td class="table-success">OKAY</td>
            <td class="table-success">OKAY</td>
            <td class="table-success">OKAY</td>
          </tr>
        </tbody>
      </table>
    </div>

我试图在屏幕较小时（如智能手机）修复第一列。如果用户向下/向上滚动，第一列也会滚动。但是如果用户向左/向右滚动，则第一列将被固定，其余的将滚动。有人可以帮帮我吗？

我试着以最好的方式解释，希望你理解

抱歉我的英文不好