Как сделать, чтобы первый ряд тела плавал на вершине стола

Question

У меня есть таблица, как показано ниже, с первой строкой внутри tbody , содержащей заголовок столбца (я делаю это так, чтобы ширина столбца соответствовала ширине ячеек td)

I хочу сделать первую строку, row-header , чтобы она плавала в верхней части таблицы, не нарушая ширину столбцов.

позиция абсолют и sticky не работает.

.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

попробуйте это:

.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

Добавлены следующие стили

#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>

Answer 3

Проверьте приведенный ниже фрагмент.

$(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>