For Ink

HTML

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Bootstrap Card Example</title>
  </head>
  <body>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="view">
  <div class="wrapper">
    <table class="table">
      <thead>
        <tr>
          <th class="sticky-col first-col">Number</th>
          <th class="sticky-col second-col">First Name</th>
          <th>Last Name</th>
          <th>Employer</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="sticky-col first-col">1</td>
          <td class="sticky-col second-col">Mark</td>
          <td>Ham</td>
          <td>Micro</td>
        </tr>
        <tr>
          <td class="sticky-col first-col">2</td>
          <td class="sticky-col second-col">Jacob</td>
          <td>Smith</td>
          <td>Adob Adob Adob AdobAdob Adob Adob Adob Adob</td>
        </tr>
        <tr>
          <td class="sticky-col first-col">3</td>
          <td class="sticky-col...

CSS

.view {
    margin: auto;
    width: 600px;
}

.wrapper {
    position: relative;
    overflow: auto;
    border: 1px solid black;
    white-space: nowrap;
}

.sticky-col {
    position: -webkit-sticky;
    position: sticky;
    background-color: white !important;
}

.first-col {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    left: 0px;
}

.second-col {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    left: 100px;
}

.wrapper[data-horizontal-scroll-end="false"] table tr td:last-child {
    border-right: black 1px solid;
     box-shadow: 0px 0px 5px rgba(0, 0, 0, .4);
}

JavaScript

(function() {
    var wrapper = document.querySelector(".wrapper");
    var wrapperScrollEvent = function(e) {
        e.currentTarget.dataset.horizontalScrollEnd = (e.currentTarget.scrollLeft + e.currentTarget.clientWidth >= e.currentTarget.scrollWidth);
        e.currentTarget.dataset.horizontalScrollBegin = (e.currentTarget.scrollLeft === 0);
    }

    wrapper.addEventListener("scroll", wrapperScrollEvent);
    wrapperScrollEvent({
        currentTarget: wrapper
    });

})();