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>

Answer 1

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>

Answer 2

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>

Answer 3

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>