Freeze columns(div cols)

by Anil D

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick.grid.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick-default-theme.css">
  <form id="form1">
      <div  class="divTable" align="center"  >
          <div class="divCat">
             <div class="headRow">

                <div id="divCell1" class="divCell">ID</div>
                <div  id="divCell2" class="divCell">No</div>
                  <div  id="divCell3" class="divCell">verified</div>
                 <div  id="divCell4" class="divCell">decide</div>
             </div>
              
            <div class="divRow0">
                    
                  <div id="divCell5" class="divCell">1</div>
                <div id="divCell6" class="divCell" >A</div>
               
              <div id="freeze">
                <div class="fixedCell" >true</div>
                 <div class="fixedCell" >true</div>
                  <div class="fixedCell" >true</div>
                  <div class="fixedCell" >true</div>
                  <div class="fixedCell" >true</div>
                  <div class="fixedCell" >true</div>
                  <div class="fixedCell" >true</div>
                  <div class="fixedCell" >true</div>
                  <div class="fixedCell" >true</div>
                  <div class="fixedCell" >true</div>
                  <div class="fixedCell" >true</div>
                  <div class="fixedCell" >true</div>
                  <div class="fixedCell" >true</div>
                  <div class="fixedCell" >true</div>
                  <div class="fixedCell" >true</div>
                </div>                 
             </div>
...

CSS

#freeze{
    overflow-x : scroll;
    display: flex;
    width: 162px;
}   

.fixedCell{
margin: auto;
display: inline-table;
width: 80px !important;
border: 1px solid #666666;
    
}

.divCat{
width: auto;
height: 150px;
overflow-y: scroll;
float: left;
}

.divTable-notRequired{ 
margin: 40px auto 0px auto;
width: auto;
height: 150px;
border: 1px solid #666666;
border-spacing: 5px;
border-collapse: collapse;
}
.headRow{
         position:fixed;
         height:20px;
         background-color:#2682E5;
         background:#2682E5;
         width:auto;
        display: flex;
}

.selected{
        z-index:20;
        background:#E0621B;
        background-color:#E0621B;
}
.divRow0{
background: #C6CACE;
border: 1px solid #666666;
border-collapse: collapse;
display: flex;
margin-top: 20px;
}
.divRow1{
       width:auto;
       border:1px solid  #666666;
       border-collapse: collapse;
}
.divCell{
border-collapse: collapse;
width: 80px;
border-spacing: 2px;
border: 1px solid #666666;
height: 18px;
}

JavaScript

$('.divRow1').on('click',function() {
   
    $(this).toggleClass('selected')
    console.log("output is here");
  });

$('.divRow0').on('click',function() {
   alert("im in");
    $(this).toggleClass('selected')
    console.log("output is here");
  });