CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sarabjit Singh
Sarabjit Singh

Reputation: 611

Fix table head while scrolling tbody and thead column aligned to tbody column

Here is table with fixed outer height, and i need when scroll start, thead will be fixed and tbody will be scroll that show heading of each column.Is there any idea to fix heading of table on top and inner content of table will be scroll.

.max_height{max-height:100px;overflow:auto;}
<div class="max_height">
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
        <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>  <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
        <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>     
    </tbody>
  </table>
  </div>

Upvotes: 0

Views: 80

Answers (1)

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

Check this with updated css

.max_height{margin:0px;max-width:450px;}
table thead,table tbody{
  display:block;
}

table tbody{
  max-height:100px;
  overflow:auto;
}

table tr{
  display:table;
  width:100%;
  table-layout:fixed;
}
<div class="max_height">
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
        <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>  <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
        <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>     
    </tbody>
  </table>
  </div>

Upvotes: 2

Related Questions