How to make the first row of tbody float on top of the table

Question

I have a table like below with the first row inside tbody containing the column header (I'm doing this so that column width will match the width of td cells)

I want to make the first row, row-header to float on top of the table without breaking the columnns width.

position absolute and sticky does not seem to be working.

.rdp-table {
  text-align: left;
  background-color: #fff;
  border-collapse: collapse;
  margin: 0 auto;
  overflow: scroll;
}

.rdp-table tbody {
  max-height: 600px;
  overflow-y: scroll;
}

.rdp-table tr {
  border: 1px solid #ccc;
}

.rdp-table tr:hover {
  background-color: #f5f5f5;
}

.rdp-table th,
.rdp-table td {
  font-weight: 600;
  line-height: 24px;
  border: 1px solid #cecece;
  min-width: 128px;
  text-align: center;
}

.rdp-table th {
  text-align: center;
  color: black;
  text-transform: uppercase;
}

<table id="table" class="rdp-table">
  <tbody>
    <tr class="row-header">
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
    </tr>
    <tr>
      <td>Some really looong looong text that takes the whole table</td>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Some really looong looong text that takes the whole table</td>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Some really looong looong text that takes the whole table</td>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
  </tbody>
</table>

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, Jan 29 '20 at 12:36

score 1 · Answer 1 · answered Jan 29 '20 at 11:15

try this:

.rdp-table {
  text-align: left;
  background-color: #fff;
  border-collapse: collapse;
  margin: 0 auto;
  overflow: scroll;
}

.rdp-table tbody {
  max-height: 600px;
  overflow-y: scroll;
}

.rdp-table tr {
  border: 1px solid #ccc;
}

.rdp-table tr:hover {
  background-color: #f5f5f5;
}

.rdp-table th,
.rdp-table td {
  font-weight: 600;
  line-height: 24px;
  border: 1px solid #cecece;
  min-width: 128px;
  text-align: center;
}

.rdp-table th {
  text-align: center;
  color: black;
  text-transform: uppercase;
  position: sticky;
  top:0;
  background-color:#fff
}

<table id="table" class="rdp-table">
  <tbody>
    <tr class="row-header">
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
    </tr>
    <tr>
      <td>Some really looong looong text that takes the whole table</td>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Some really looong looong text that takes the whole table</td>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Some really looong looong text that takes the whole table</td>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
  </tbody>
</table>

best answer so far. it works as expected except on resize the header seems to be change positions. thank you though. — ash1f, Jan 30 '20 at 06:58
@ash1f what do you mean on resize? can you elaborate please. — sumeshsn1, Jan 30 '20 at 13:26
Idk for some reason the header seems to be jerking to the middle of the table when I resize it . — ash1f, Jan 31 '20 at 14:03

score 0 · Answer 2 · answered Jan 29 '20 at 11:09

Check the below snippet.

$(window).scroll(function() {
  var scroll = $(window).scrollTop();

  if (scroll >= 50) {
    $(".row-header").addClass("sticky");
  } else {
    $(".row-header").removeClass("sticky");
  }
});

.table-container {
  position: relative
}

.rdp-table {
  text-align: left;
  background-color: #fff;
  border-collapse: collapse;
  margin: 0 auto;
  overflow: scroll;
}

.rdp-table tbody {
  max-height: 600px;
  overflow-y: scroll;
}

.rdp-table tr {
  border: 1px solid #ccc;
}

.sticky {
  position: fixed;
  top: 0;
  left: 10px;
  right: 10px;
  z-index: 100
}

.rdp-table tr:hover {
  background-color: #f5f5f5;
}

.rdp-table th,
.rdp-table td {
  font-weight: 600;
  line-height: 24px;
  border: 1px solid #cecece;
  min-width: 128px;
  text-align: center;
}

.rdp-table th {
  text-align: center;
  color: black;
  text-transform: uppercase;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-container">
  <table id="table" class="rdp-table">
    <tbody>
      <tr class="row-header">
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
      </tr>
      <tr>
        <td>Some really looong looong text that takes the whole table</td>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
      </tr>
      <tr>
        <td>Some really looong looong text that takes the whole table</td>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
      </tr>
      <tr>
        <td>Some really looong looong text that takes the whole table</td>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
      </tr>
      <tr>
        <td>Some really looong looong text that takes the whole table</td>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
      </tr>
      <tr>
        <td>Some really looong looong text that takes the whole table</td>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
      </tr>
      <tr>
        <td>Some really looong looong text that takes the whole table</td>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
      </tr>
      <tr>
        <td>Some really looong looong text that takes the whole table</td>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
      </tr>
      <tr>
        <td>Some really looong looong text that takes the whole table</td>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
      </tr>
      <tr>
        <td>Some really looong looong text that takes the whole table</td>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
      </tr>
    </tbody>
  </table>
</div>

this isn't jquery datatable. I'm not using jquery at all. If you any solution in vanilla that would be great\ — ash1f, Jan 30 '20 at 06:56

score 0 · Answer 3 · answered Jan 29 '20 at 11:15

Added following styles

#table tbody tr:first-child {
  position: fixed;
}

#table tbody tr:nth-child(2) {
  padding-top: 30px;
}

#table tbody tr:not(:first-child) {  
  display: inline-block
}

.rdp-table {
  text-align: left;
  background-color: #fff;
  border-collapse: collapse;
  margin: 0 auto;
  overflow: scroll;
}

.rdp-table tbody {
  max-height: 600px;
  overflow-y: scroll;
}

.rdp-table tr {
  border: 1px solid #ccc;
}

.rdp-table tr:hover {
  background-color: #f5f5f5;
}

.rdp-table th,
.rdp-table td {
  font-weight: 600;
  line-height: 24px;
  border: 1px solid #cecece;
  min-width: 128px;
  text-align: center;
}

.rdp-table th {
  text-align: center;
  color: black;
  text-transform: uppercase;
}

#table tbody tr:first-child {
  position: fixed;
}

#table tbody tr:nth-child(2) {
  padding-top: 30px;
}

#table tbody tr:not(:first-child) {  
  display: inline-block
}

<table id="table" class="rdp-table">
  <tbody>
    <tr class="row-header">
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
    </tr>
    <tr>
      <td>Some really looong looong text that takes the whole table</td>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Some really looong looong text that takes the whole table</td>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Some really looong looong text that takes the whole table</td>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Some really looong looong text that takes the whole table</td>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Some really looong looong text that takes the whole table</td>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Some really looong looong text that takes the whole table</td>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Some really looong looong text that takes the whole table</td>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Some really looong looong text that takes the whole table</td>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Some really looong looong text that takes the whole table</td>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
  </tbody>
</table>

position: fixed wouldn't be helpful if this was in the middle of the page — ash1f, Jan 30 '20 at 06:55

How to make the first row of tbody float on top of the table

3 Answers3