Question

我有一个由div组成的表，但是我很难让它的标题修复/冻结。我需要冻结下表的第一行，这里是我目前的代码。如果您需要更多信息，请告诉我。

<!--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>

需要帮助冻结表标题冻结/修复

0 个答案: