CODEWITHSUNDEEP
css
user11415630
user11415630

Reputation:

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

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?

Upvotes: 0

Views: 389

Answers (1)

Ori Drori
Ori Drori

Reputation: 192317

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>

Upvotes: 1

Related Questions