<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.