the table is sticky for the first table th and table td.

Selector elements was used :

  • ::-webkit-scrollbar the entire scrollbar.
  • ::-webkit-scrollbar-thumb— the draggable scrolling handle.
  • ::first-of-type every element that is the first child, of a particular type, of its parent.

Css style on table :

table {
margin: 1em 0;
width: 100%;
overflow: hidden;
overflow-x: auto;
display: block;
white-space: nowrap;
table td:first-of-type ,table th:first-of-type{
position: sticky;
left: 0;
background: yellow;
color: #212121;
font-weight: bold;
&:after {
content: "";
position: absolute;
top: 0;
right: -1px;
height: 100%;
width: 1px;
background: #ccc;
table::-webkit-scrollbar {
width: 5px;
height: 10px;
background-color: #ccc ; /* or add it to the track */
table::-webkit-scrollbar-thumb {
background: var(--primary);
table th{
background-color: var(--primary);
color: white;
table td,table th{
padding:10px 15px;
border: 1px solid #ddd;

HTMl code on table:


the hightline yellow color is sticky on first td and th,please preview below.