Interview Questions

How to create fixed table header and scrollable tbody in HTML?

Use the following code to create a fixed table header and scrollable tbody in HTML?

<!DOCTYPE html>
<html>

<head>
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">

#list-table{
        height:50px!important;
        border:#000 0px solid;
        display:block;
        width:100%;
        overflow-y:scroll;
}


#list-table td{
        width:5%;
        padding-left:5px;
        height:15px;
        border:#ccc 1px solid;
}

.margin-b{
        margin-bottom:-1px;
        background-color:#ccc;
        border:#ccc 1px solid;
}

.col-1{
        width:18.5%;
}
.col-2{
        width:23.1%;
}

.col-3{
        width:35%;
}
.col-4{
        width:45%;
}
.ListTable {
        margin-top: 170px;
       
       
}


</style>
</head>
<div id="user-detail-table"></div>


        <div id="user-list-view" class="section-list"> 
               
                <div id="newUser" >
                        </div>
                       
       
       
        <div class="ListTable hide">
                <table class="table table-bordered margin-b">
                       
                <thead>
                        <td class="col-1"><b> Option</b> </td>
                        <td class="col-2"><b> Name </b></td>
                        <td class="col-3"><b> Email </b></td>
                        <td class="col-4"><b> Dept Name</b> </td>

                </thead>
               
                <table id="list-table" >
                <tr>
                <td><input type="radio" class="selectUser" name="userId" value="123"></td>
                                <td >Vezos</td>
                                <td >vezos@gmail.com</td>
                                <td >HR</td>
                <tr>           
                <tr>
                <td><input type="radio" class="selectUser" name="userId" value="123"></td>
                                <td >Vezos</td>
                                <td >vezos@gmail.com</td>
                                <td >HR</td>
                <tr>           
                <tr>
                <td><input type="radio" class="selectUser" name="userId" value="123"></td>
                                <td >Vezos</td>
                                <td >vezos@gmail.com</td>
                                <td >HR</td>
                <tr>           
                <tr>
                <td><input type="radio" class="selectUser" name="userId" value="123"></td>
                                <td >Vezos</td>
                                <td >vezos@gmail.com</td>
                                <td >HR</td>
                <tr>           
                </table>
               
        </table>
  </div>
</div>
</html>

0
No votes yet
Your rating: None