<div class="demoContainer">
			<div class="projHeader">
				<div class="primaryText">Sticky Table Column in Pure CSS3</div>
				<div class="createdBy">Created By <a href="http://www.dropinks.com/table-sticky-column-pure-css3/" target="_blank">Dropinks</a>/<a href="https://dribbble.com/shots/13921527-Table-sticky-column-in-pure-CSS3/" target="_blank">Dribbble</a></div>
				<p class="message">For Better usability and interaction use web browsers - chrome, firefox</p>
			</div>
			<div class="container">
				<div class="tableContainer">
					<div class="tableHeader" id="tableHeader">
						<div class="tableCol"> Order #</div>
						<div class="tableCol "> Company name</div>
						<div class="tableCol"> Owner name</div>
						<div class="tableCol">Email</div>
						<div class="tableCol">Mobile</div>
						<div class="tableCol">Status</div>
						<div class="tableCol">Total</div>
						<div class="tableCol">Created On</div>
						<div class="tableCol">Last Update</div>
					</div>
					<div class="tableRow">
						<div class="tableCol">776476</div>
						<div class="tableCol">3Com Corp</div>
						<div class="tableCol">Adam</div>
						<div class="tableCol">adamsgoc0@hubtp.com</div>
						<div class="tableCol">8765478890</div>
						<div class="tableCol">Active</div>
						<div class="tableCol">6,097 $</div>
						<div class="tableCol">May 10, 2019</div>
						<div class="tableCol">Jul 07, 2020</div>
					</div>
					<div class="tableRow">
						<div class="tableCol">3453689</div>
						<div class="tableCol">Abbott Laboratories</div>
						<div class="tableCol">Abbott</div>
						<div class="tableCol">abbott@hubtp.com</div>
						<div class="tableCol">345679077</div>
						<div class="tableCol">In-Active</div>
						<div class="tableCol">197 $</div>
						<div class="tableCol">Sep 10, 2019</div>
						<div class="tableCol">Jul 07, 2020</div>
					</div>
					<div class="tableRow">
						<div class="tableCol">1238299</div>
						<div class="tableCol">Acterna Corp.</div>
						<div class="tableCol">Acterna</div>
						<div class="tableCol">acterna@ceorp.com</div>
						<div class="tableCol">654787687</div>
						<div class="tableCol">Active</div>
						<div class="tableCol">197 $</div>
						<div class="tableCol">Oct 10, 2019</div>
						<div class="tableCol">Dec 07, 2019</div>
					</div>
					<div class="tableRow">
						<div class="tableCol">776476</div>
						<div class="tableCol">3Com Corp</div>
						<div class="tableCol">Adam</div>
						<div class="tableCol">adamsgoc0@hubtp.com</div>
						<div class="tableCol">8765478890</div>
						<div class="tableCol">Active</div>
						<div class="tableCol">6,097 $</div>
						<div class="tableCol">May 10, 2019</div>
						<div class="tableCol">Jul 07, 2020</div>
					</div>
					<div class="tableRow">
						<div class="tableCol">3453689</div>
						<div class="tableCol">Abbott Laboratories</div>
						<div class="tableCol">Abbott</div>
						<div class="tableCol">abbott@hubtp.com</div>
						<div class="tableCol">345679077</div>
						<div class="tableCol">In-Active</div>
						<div class="tableCol">197 $</div>
						<div class="tableCol">Sep 10, 2019</div>
						<div class="tableCol">Jul 07, 2020</div>
					</div>
					<div class="tableRow">
						<div class="tableCol">1238299</div>
						<div class="tableCol">Acterna Corp.</div>
						<div class="tableCol">Acterna</div>
						<div class="tableCol">acterna@ceorp.com</div>
						<div class="tableCol">654787687</div>
						<div class="tableCol">Active</div>
						<div class="tableCol">197 $</div>
						<div class="tableCol">Oct 10, 2019</div>
						<div class="tableCol">Dec 07, 2019</div>
					</div>
					<div class="tableRow">
						<div class="tableCol">776476</div>
						<div class="tableCol">3Com Corp</div>
						<div class="tableCol">Adam</div>
						<div class="tableCol">adamsgoc0@hubtp.com</div>
						<div class="tableCol">8765478890</div>
						<div class="tableCol">Active</div>
						<div class="tableCol">6,097 $</div>
						<div class="tableCol">May 10, 2019</div>
						<div class="tableCol">Jul 07, 2020</div>
					</div>
					<div class="tableRow">
						<div class="tableCol">3453689</div>
						<div class="tableCol">Abbott Laboratories</div>
						<div class="tableCol">Abbott</div>
						<div class="tableCol">abbott@hubtp.com</div>
						<div class="tableCol">345679077</div>
						<div class="tableCol">In-Active</div>
						<div class="tableCol">197 $</div>
						<div class="tableCol">Sep 10, 2019</div>
						<div class="tableCol">Jul 07, 2020</div>
					</div>
					<div class="tableRow">
						<div class="tableCol">1238299</div>
						<div class="tableCol">Acterna Corp.</div>
						<div class="tableCol">Acterna</div>
						<div class="tableCol">acterna@ceorp.com</div>
						<div class="tableCol">654787687</div>
						<div class="tableCol">Active</div>
						<div class="tableCol">197 $</div>
						<div class="tableCol">Oct 10, 2019</div>
						<div class="tableCol">Dec 07, 2019</div>
					</div>
				</div>
			</div>
		</div>
.primaryText{
	font-weight: 300;
	font-size: 50px;
	text-shadow: 2px 2px 1px rgba(0,0,0,0.3);
}
.secondaryText{
	font-weight: 300;
	font-size: 25px;
}
.createdBy {
    font-weight: 300;
    font-size: 17px;
    margin-top: 10px;
}
.createdBy a{
    color: #333;
    font-weight: 500;
}
.message {
    background: rgba(255, 255, 255, 0.31);
    padding: 10px;
    display: inline-block;
    text-align: center;
    color: #000;
    margin: 25px 0;
    font-size: 13px;
    box-shadow: 2px 2px 0px 1px rgba(0,0,0,0.2);
    border-radius: 4px;
}
.projHeader{
	text-align: center;
}

.footer{position: fixed; bottom: 0; right: auto; top: auto; left: 0; border-top: 1px solid rgba(0,0,0,0.5); width: 100%; transform: translate(0); border: none; padding: 0; text-align: center; border-top: 1px solid #bfc7e4;}
.footer div{display: inline-block;}
.footer a.social{display: inline-block; font-size: 17px; padding: 7px 0; color: #000; text-decoration: none; margin: 0px 20px;}

body{background: #333; font-family: poppins;}
.projHeader, .createdBy a, .message{color: #fff;}
.message{background: rgba(255, 255, 255, 0.1);}

.demoContainer{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 

.container{ width: 750px; max-height: 350px; overflow: auto; border-radius: 6px; margin: 0 auto;
  border: 1px solid #484848;}
.tableContainer{display: table; color: #fff;}
.tableHeader{display: table-header-group;}
.tableRow{display: table-row;}
.tableCol{display: table-cell; white-space: nowrap; padding: 10px 30px;
  border-bottom: 1px solid #585858; background: #333; position: relative;}
.tableHeader .tableCol{font-weight: 500; background: #545454; border: none;
  position: sticky; top: 0px; z-index: 9;}
.tableCol:nth-child(2){position: sticky; left: 0px; z-index: 10;}
.tableHeader .tableCol:nth-child(2){z-index: 11; color: #fd1874}

.tableHeader .tableCol:nth-child(2):after{position: absolute; content: "Sticky Column"; top: 45px; left: 50%; border: 1px solid #fd1874; font-weight: 400; color: #333; transform: translate(-50%, -50%); padding: 0px 10px; border-radius: 4px; font-size: 11px; color: #fff; background: #333; }

External CSS

  1. https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600

External JavaScript

This Pen doesn't use any external JavaScript resources.