CODEWITHSUNDEEP
htmlcsshtml-tablefixed-header-tables
noel293
noel293

Reputation: 504

Fixed table header in a scrollable div with many tbody

I have been trying for the past 3 days to make my table's thead to be fixed inside a scrollable div but failed.

I have a table with the following format:

<div class='div_container'>
<table id='table'> 
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
</thead>
<tbody>
<tr class='resultsRow'>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr class='resultsRow'>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr class='resultsRow'>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr class='resultsRow'>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
<tbody>
<tr class='resultsRow'>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr class='resultsRow'>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>

I am trying to make the headers be fixed in the top of the div but the only thing I get (except from complete failure) is the thead becoming fixed but it gets out of the div margins.

Any ideas how to fix this?

I have tried using both CSS and js but again no luck.

My CSS so far: 

.div_container{
    overflow: scroll;
    display: block;
    height: 600px;
    margin-left: 10%;
    margin-right: 10%;    
}

#table tbody .resultsRow td {
    text-align: center;    
}

thead {
      position: sticky;
       /* display: block; */
}

Upvotes: 0

Views: 902

Answers (1)

Vikas Jadhav
Vikas Jadhav

Reputation: 4692

Try this pure css fixed table header solution using position: sticky; 

div {
  display: inline-block;
  height: 200px;
  overflow: auto
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

table {
  border-collapse: collapse;
}

th {
  background-color: #ddd;
  color: #fff;
}

th,
td {
  padding: 1em .5em;
}

table tr {
  color: #212121;
}
<div>
  <table>
    <thead>
      <tr class="header">
        <th>header 1</th>
        <th>header 2</th>
        <th>header 3</th>
        <th>header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 1

Related Questions