<div class="table-wrapper">
  <div class="table">
    <div class="col indigo">
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
    </div>
    <div class="col lightblue">
      <div class="item ">BIG ITEM</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
    </div>
    <div class="col gray">
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
    </div>
  </div>
</div>
.indigo {
  background: indigo;
}

.lightblue {
  background: lightblue;
}

.gray {
  background: gray;
}

.table {
  display: flex;
  flex-wrap:nowrap;
  width: 1000px;
}

.item {
  padding: 2rem;
  background: pink;
  border:2px solid lightgreen;
}

.item.big {
  padding: 4rem;
}

.col {
  width: 400px;
  height: 400px;
}
.table-wrapper {
  max-width: 100%;
  overflow: hidden;
  overflow-x: auto;
}
.col:first-child {
  position: sticky;
  z-index: 5;
  left: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.