Making a horizontal scrolling table where the first column is sticky and stays in place.

Tables are fine to an extent but once you start having more than a few rows viewing the data is troublesome especially on a mobile device. Having a horizontal scrolling table fixes this for most part.

To speed up the styling process Bootstrap is being used.

CodePen example.

The only part that needs to be done is setting the first child of th and td to be sticky and pinned to 0 left.

.table th:first-child,
.table td:first-child {
  position: sticky;
  left: 0;
  background-color: #ad6c80;
  color: #373737;
}

The full HTML:

<div class="container">
  <div class="row mt-3">
    <div class="col-3"></div>
    <div class="col-6">
      <div class="table-responsive">
        <table class="table table-hover">
          <thead>
            <tr>
              <th scope="col">GUID</th>
              <th scope="col">Username</th>
              <th scope="col">Score</th>
              <th scope="col">Rating</th>
              <th scope="col">Attempts</th>
              <th scope="col">Last login</th>
              <th scope="col">Joined</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>1012</th>
              <td>hamsterclover</td>
              <td>4,230</td>
              <td>9</td>
              <td>3</td>
              <td>2020-01-24 19:52:28</td>
              <td>2018-05-21 22:10:21</td>
            </tr>
            <tr>
              <th>1013</th>
              <td>cellofruit</td>
              <td>4,126</td>
              <td>7</td>
              <td>3</td>
              <td>2020-01-21 11:05:16</td>
              <td>2019-02-05 17:41:19</td>
            </tr>
            <tr>
              <th>1014</th>
              <td>enchantingsun</td>
              <td>4,085</td>
              <td>5</td>
              <td>4</td>
              <td>2020-01-22 18:44:33</td>
              <td>2019-03-28 12:16:02</td>
            </tr>
            <tr>
              <th>1015</th>
              <td>antdory</td>
              <td>4,139</td>
              <td>7</td>
              <td>5</td>
              <td>2020-01-25 18:12:58</td>
              <td>2019-06-07 11:44:37</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="col-3"></div>
  </div>
</div>

The full CSS:

body {
  background: #94b5c0;
}
.table {
  background: #ee99a0;
  border-radius: 0.2rem;
  width: 100%;
  padding-bottom: 1rem;
  color: #212529;
  margin-bottom: 0;
}

.table th:first-child,
.table td:first-child {
  position: sticky;
  left: 0;
  background-color: #ad6c80;
  color: #373737;
}

.table td {
  white-space: nowrap;
}