Make table column fixed when device small in Bootstrap 4

Question

I'm using Bootstrap 4 Table to make a 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>

I'm trying to make the first column be fixed when the screen is small (like smartphones). If the user scroll down/up, the first column will scroll too. But if the user scroll left/right, the firts column will be fixed, and the rest will scroll. Anyone can help me ?

I tried to explain in the best way, I hope you understood

Sorry my bad english

Side note: Why use a table? divs are so much better: https://softwareengineering.stackexchange.com/questions/277778/why-are-people-making-tables-with-divs - looks like you want fixed/frozen columns: https://stackoverflow.com/questions/30449054/fix-first-column-of-a-bootstrap-table — , May 08 '18 at 21:02
That's not possible through table you may wanna check the bootstrap grid system :https://getbootstrap.com/docs/4.1/layout/grid/ Or the grid-template property : https://www.w3schools.com/cssref/pr_grid-template.asp — Rainbow, May 08 '18 at 21:08
Well, I'm not professional in web desing. Is there anyway to make a responsive table with these parameters that I want ? — Tony Starkus, May 08 '18 at 21:19
@user770 the second link show what I exactly want, but I'm copying the code with errors that I can't solve :/ — Tony Starkus, May 08 '18 at 21:20
Add that to your post. "Tried this post [LINK], but I get this error: [ERROR]" — , May 08 '18 at 21:22

Make table column fixed when device small in Bootstrap 4

0 Answers0