1

I have Table made of divs but I am having difficulty to make it's header fix/freeze. I need to freeze the first row for the below table, here's my current code below Please let me know if you need anymore information.

<!--Table CSS-->
#tblWrapper{
    max-height:100px;
    overflow-y:scroll;
    overflow-x:hidden;
    height:auto;
    width:100%;
    }
.container{
    display:table;
    width:94%;
    border-collapse: collapse;
    background-color:#ececec;
    margin:0px auto;
    margin-bottom:1%;
    }
.heading{
     display:table-row;
     line-height: 25px;
     font-weight:bold;
     padding-left:5px; 
}


.table-row:nth-child(odd){  
     display:table-row;
     position:relative;
}
.table-row:nth-child(even){  
     display:table-row;
     background-color:white;
}
.col{
    display:table-cell;
    border: 1px solid #CCC;
    padding-left:5px;

}


<!--Table Starts From Here-->
<div id="tblWrapper">
                          <div class="container">

                               <!--Heading of the table-->                            
                              <div id="headingDiv" class="heading">
                                   <div class="col">ID</div>
                                   <div class="col">Is Active </div>
                                   <div class="col">Article Name </div>
                                   <div class="col">Description </div>
                                   <div class="col">Action </div>
                               </div>

                               <!--Row 1-->                            

                              <div class="table-row">
                                   <div class="col">1</div>
                                   <div class="col"><input type="checkbox" /></div>
                                   <div class="col">3 tier bookshelf (Set Up)</div>
                                   <div class="col">3 tier bookshelf (Set Up)</div>
                                   <div class="col">Add &nbsp; Edit &nbsp; Delete &nbsp; </div>
                              </div>
                               <!--Row 2-->                            
                              <div class="table-row">
                                   <div class="col">2</div>
                                   <div class="col"><input type="checkbox" /></div>
                                   <div class="col">3 WICK CANDLE HOLDER WITH HURRICANE</div>
                                   <div class="col">3 WICK CANDLE HOLDER WITH HURRICANE</div>
                                   <div class="col">Add &nbsp; Edit &nbsp; Delete &nbsp; </div>
                              </div>
                               <!--Row 3-->                             
                              <div class="table-row">
                                   <div class="col">2</div>
                                   <div class="col"><input type="checkbox" /></div>
                                   <div class="col">3 WICK CANDLE HOLDER WITH HURRICANE</div>
                                   <div class="col">3 WICK CANDLE HOLDER WITH HURRICANE</div>
                                   <div class="col">Add &nbsp; Edit &nbsp; Delete &nbsp; </div>
                               <!--Row 4-->                            
                              </div><div class="table-row">
                                   <div class="col">2</div>
                                   <div class="col"><input type="checkbox" /></div>
                                   <div class="col">3 WICK CANDLE HOLDER WITH HURRICANE</div>
                                   <div class="col">3 WICK CANDLE HOLDER WITH HURRICANE</div>
                                   <div class="col">Add &nbsp; Edit &nbsp; Delete &nbsp; </div>
                              </div>

                              <!--Row 5-->                            
                              <div class="table-row">
                                   <div class="col">2</div>
                                   <div class="col"><input type="checkbox" /></div>
                                   <div class="col">3 WICK CANDLE HOLDER WITH HURRICANE</div>
                                   <div class="col">3 WICK CANDLE HOLDER WITH HURRICANE</div>
                                   <div class="col">Add &nbsp; Edit &nbsp; Delete &nbsp; </div>
                              </div>

                          </div>

                               <!--End of the Table-->                            
  </body>
  </html>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
zubairblaze
  • 11
  • 2
  • 2
    Your really going to have to explain what you mean by "fix/freeze" – QBM5 Sep 23 '14 at 13:48
  • Thanks for feedback. I want to make top row Fixed (No-Scroll) while other table should scroll up as usual. – zubairblaze Sep 23 '14 at 13:58
  • possible duplicate of [HTML table with fixed headers?](http://stackoverflow.com/questions/673153/html-table-with-fixed-headers) – Turnip Sep 23 '14 at 14:03
  • No, As you can see, I am using purely CSS while "HTML table with fixed headers" Used Scripting – zubairblaze Sep 23 '14 at 14:11
  • In that post, [this answer](https://stackoverflow.com/a/13071559/3816975) is about doing this with the new `position: sticky;` and [this answer](https://stackoverflow.com/a/20030304/3816975) manages to do it with today's css. So I'd still consider this a duplicate. – parchment Sep 23 '14 at 14:19
  • @parchment, Thanks for feeding me back. To achieve sticky with traditional code we need to add some JavaScript. I am looking for script free code. On the other hand Position: sticky is supported on many platforms. – zubairblaze Sep 23 '14 at 14:33

0 Answers0