html - 在 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>

当屏幕很小（如智能手机）时，我试图固定第一列。如果用户向下/向上滚动，第一列也会滚动。但是如果用户向左/向右滚动，第一列将被固定，其余列将滚动。任何人都可以帮助我吗？

我试图用最好的方式解释，希望你能理解

对不起我的英语不好

标签： htmlcssbootstrap-4