Unable to make fixed header for table

Question

I had written a code to make table header fixed. And make vertical scroll bar, header and table data size and table width should be fixed. I even declared table-responsive for adjusting automatic width for the th and td.

How can I make vertical scroll with th fixed and table data size fixed?

thead th {
  height: 30px;
}

tbody {
  overflow-y: auto;
  height: 190px;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

<div class="container">
  <table class="table  table-bordered table-responsive">
    <thead>
      <tr>
        <th>Sl No</th>
        <th>Full Name</th>
        <th>Email</th>
        <th>Designation</th>
        <th>Department</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Unkown User</td>
        <td>unknown@gmail.com.com</td>
        <td>Unkown User</td>
        <td>Unkown User</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Unkown User Unkown User </td>
        <td>unknown@gmail.com.com</td>
        <td>Unkown User</td>
        <td>Unkown User</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Unkown User</td>
        <td>unknown@gmail.com.com</td>
        <td>Unkown User</td>
        <td>Unkown User</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Unkown User</td>
        <td>unknown@gmail.com.com</td>
        <td>Unkown User</td>
        <td>Unkown User</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Unkown User</td>
        <td>unknown@gmail.com.com</td>
        <td>Unkown User</td>
        <td>Unkown User</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Unkown User</td>
        <td>unknown@gmail.com.com</td>
        <td>Unkown User</td>
        <td>Unkown User</td>
      </tr>
    </tbody>
  </table>
</div>

display: block; if i declare this header state is changing.. please help — Learning, Jul 16 '18 at 09:42

Ahmad · Answer 1 · 2018-07-16T11:18:20.627

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>table</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link
         href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"
         rel="stylesheet">
      <!-- Theme CSS -->
      <link href="css/style.css" rel="stylesheet"">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script
         src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <!-- Favicon -->
      <link rel="shortcut icon" href="img/favicon.ico">
      <script
         src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
      <style type="text/css">
         thead{position:fixed;}
         thead th {
         height: 30px;
         z-index:9999;
         background:#fff;
         }
         tbody {
         overflow:hidden;
         overflow-y: auto;
         height: 190px;

         }
      .myCustomTable .col-md-1{
          width:9%;
       }
     .myCustomTable .col-md-2{
          width:16%;
       }
     .myCustomTable .col-md-3{
          width:25%;
       }
      </style>
   </head>
   <div class="container">
 
 
 <table class="table table-bordered table-responsive myCustomTable" >
     <thead>
         <tr class="row">
             <th class="col-md-1">Sl No</th>
             <th class="col-md-2">Full Name</th>
             <th class="col-md-3">Email</th>
             <th class="col-md-3">Designation</th>
             <th class="col-md-3">Department</th>
            </tr>
        </thead>
        <tbody>
            <tr class="row">
                <td class="col-md-1">1</td>
                <td class="col-md-2">Unkown User</td>
                <td class="col-md-3">unknown@gmail.com.com</td>
                <td class="col-md-3">Unkown User</td>
                <td class="col-md-3">Unkown User</td>
            </tr>
     <tr class="row">
                <td class="col-md-1">1</td>
                <td class="col-md-2">Unkown User Unkown User  </td>
                <td class="col-md-3">unknown@gmail.com.com</td>
                <td class="col-md-3">Unkown User</td>
                <td class="col-md-3">Unkown User</td>
            </tr>
     <tr class="row">
                <td class="col-md-1">1</td>
                <td class="col-md-2">Unkown User Unkown User  </td>
                <td class="col-md-3">unknown@gmail.com.com</td>
                <td class="col-md-3">Unkown User</td>
                <td class="col-md-3">Unkown User</td>
            </tr>
    <tr class="row">
                <td class="col-md-1">1</td>
                <td class="col-md-2">Unkown User Unkown User  </td>
                <td class="col-md-3">unknown@gmail.com.com</td>
                <td class="col-md-3">Unkown User</td>
                <td class="col-md-3">Unkown User</td>
            </tr>  <tr class="row">
                <td class="col-md-1">1</td>
                <td class="col-md-2">Unkown User Unkown User  </td>
                <td class="col-md-3">unknown@gmail.com.com</td>
                <td class="col-md-3">Unkown User</td>
                <td class="col-md-3">Unkown User</td>
            </tr>  <tr class="row">
                <td class="col-md-1">1</td>
                <td class="col-md-2">Unkown User Unkown User  </td>
                <td class="col-md-3">unknown@gmail.com.com</td>
                <td class="col-md-3">Unkown User</td>
                <td class="col-md-3">Unkown User</td>
            </tr>
            
        </tbody>
    </table>
</div>
   </body>
</html>

ok give me a minute. whenever you set the table head to fixed you need to give width manually. Let me fix it for you. — Ahmad, Jul 16 '18 at 11:10

score -1 · Answer 2 · answered Jul 16 '18 at 11:12

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>table</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link
         href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"
         rel="stylesheet">
      <!-- Theme CSS -->
      <link href="css/style.css" rel="stylesheet"">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script
         src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <!-- Favicon -->
      <link rel="shortcut icon" href="img/favicon.ico">
      <script
         src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
      <style type="text/css">
         table{
            width: 800px;
            position: relative;
         }
         thead {
         position: absolute;
         overflow-y: auto;
         overflow-x: hidden;
         height: 50px;
         max-width: 100%;
         top: 0;
         }
         tbody {
         max-width: 100%;
         position: absolute;
         top: 40px;
         height: 10em;
         overflow-y:scroll;
         display:block;
         }
      </style>
   </head>
   <div class="container">
 
 
 <table class="table  table-bordered table-responsive" >
     <thead>
         <tr>
             <th>Sl No</th>
             <th>Full Name</th>
             <th>Email</th>
             <th>Designation</th>
             <th>Department</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Unkown User</td>
                <td>unknown@gmail.com.com</td>
                <td>Unkown User</td>
                <td>Unkown User</td>
            </tr>
     <tr>
                <td>1</td>
                <td>Unkown User Unkown User  </td>
                <td>unknown@gmail.com.com</td>
                <td>Unkown User</td>
                <td>Unkown User</td>
            </tr>
     <tr>
                <td>1</td>
                <td>Unkown User</td>
                <td>unknown@gmail.com.com</td>
                <td>Unkown User</td>
                <td>Unkown User</td>
            </tr>
     <tr>
                <td>1</td>
                <td>Unkown User</td>
                <td>unknown@gmail.com.com</td>
                <td>Unkown User</td>
                <td>Unkown User</td>
            </tr> <tr>
                <td>1</td>
                <td>Unkown User</td>
                <td>unknown@gmail.com.com</td>
                <td>Unkown User</td>
                <td>Unkown User</td>
            </tr>  <tr>
                <td>1</td>
                <td>Unkown User</td>
                <td>unknown@gmail.com.com</td>
                <td>Unkown User</td>
                <td>Unkown User</td>
            </tr>
            
        </tbody>
    </table>
</div>
   </body>
</html>

Unable to make fixed header for table

2 Answers2