how to freeze first row of html table

By using CSS we can freeze the first row of the Html table. Simply I will describe the code below.

It can be used to compare all rows with the first row of content. Here, we use an Html table by using div tags with mobile compatibility.

And also, we freeze the first row of the Html table by using tr and td.

Follow the below link for normal HTML table using tr and td.

How to freeze the first row of Html

 

 

HTML

<div class="cs-table">
  <div class="cs-table-container" style="height:400px;">
   <div class="cs-header-row cs-table-row">
   <div class="cs-header-cell cs-table-cell">
   facebook
   </div>
   <div class="cs-header-cell cs-table-cell">
   facebook
   </div>
   <div class="cs-header-cell cs-table-cell">
   facebook
   </div>
   <div class="cs-header-cell cs-table-cell">
   facebook
   </div>
   </div>
   
   <div class="cs-row">
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>   
   </div>
      <div class="cs-row">
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>   
   </div>   <div class="cs-row">
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>   
   </div>   <div class="cs-row">
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>   
   </div>   <div class="cs-row">
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>   
   </div>   <div class="cs-row">
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>   
   </div>   <div class="cs-row">
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>   
   </div>   <div class="cs-row">
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>   
   </div>   <div class="cs-row">
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>   
   </div>   <div class="cs-row">
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>   
   </div>   <div class="cs-row">
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>   
   </div>   <div class="cs-row">
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>   
   </div>   <div class="cs-row">
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>   
   </div>   <div class="cs-row">
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>   
   </div>   <div class="cs-row">
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>   
   </div>   <div class="cs-row">
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>
   <div class="cs-cell">Unopen
   </div>   
   </div>
   
   </div>
 </div>

 

CSS

.cs-table {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    white-space: nowrap;
    width: 100%;
    font-size: 13px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 100%;
    position: relative;
}
.cs-table .cs-table-container {
    width: 100%;
    height: 100%;
    overflow: auto;
}
.cs-header-row {
    font-family: Roboto-Regular;
    cursor: pointer;
    height: 42px;
    position: absolute;
}
.cs-table-row {
    width: 100%;
    display: -webkit-box;
    display: flex;
    font-size: 14px;
}
.cs-header-cell {
    background-color: #f0f4f7;
    color: #000;
    padding: .6rem 1em;
}
.cs-table-cell {
    display: -webkit-box;
    display: flex;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    flex-grow: 1;
    padding: .6em 1em;
    list-style-type: none;
    min-width: 200px;
    white-space: nowrap;
    width: 200px;
    text-overflow: ellipsis;
    border-bottom: 1px solid #dfe3eb;
    -webkit-box-align: center;
    align-items: center;
}
.cs-row {
    width: 100%;
    display: -webkit-box;
    display: flex;
    font-size: 14px;
}
.cs-cell {
    display: -webkit-box;
    display: flex;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    flex-grow: 1;
    padding: .6em 1em;
    list-style-type: none;
    min-width: 200px;
    white-space: nowrap;
    width: 200px;
    text-overflow: ellipsis;
    border-bottom: 1px solid #dfe3eb;
    -webkit-box-align: center;
    align-items: center;
}