thead and tbody not aligning properly after making thead fixed and tbody scrollable

Question

I want my table to have fixed thead and scrollable tbody.I applied the following CSS to it:

thead, tbody { 
   display: block; 
}
tbody {
    height: 383px;        
    overflow-y: auto;  
    overflow-x: auto;
}

After applying above css, thead got fixed, and tbody scrollable. But the data of thead is not aligning with tbody. Even there is a lot of space left in the right hand side of the table, it means tr elements doesn't fill the entire space of their container.

Can anyone please help me to fix this issue?

Does this answer your question? [Table header to stay fixed at the top when user scrolls it out of view with jQuery](https://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the-top-when-user-scrolls-it-out-of-view-with-jque) — Awais, Dec 10 '19 at 07:45

Ori Drori · Answer 1 · 2019-12-10T10:28:48.183

You can use position: sticky to freeze your th cells:

.container {
  position: relative;
  margin-top: 2vh;
  height: 90vh;
  overflow: auto;
}

table {
  border-collapse: collapse;
}

td,
th {
  border: 1px solid black;
  border-top: none;
}

th {
  position: sticky;
  top: 0;
  background: black;
  padding: 3px;
  color: white;
}

<div class="container">
  <table>
    <thead>
      <tr>
        <th>header</th>
        <th>header</th>
        <th>header</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
    </tbody>
  </table>
</div>

Using it, if i am doing scrolling, the tbody content is going behind the thead, and it's visible also..not looking good.. — , Dec 10 '19 at 08:12

thead and tbody not aligning properly after making thead fixed and tbody scrollable

1 Answers1