如何使第一行 tbody 浮动在表格顶部答案

【问题标题】：How to make the first row of tbody float on top of the table如何使第一行 tbody 浮动在表格顶部
【发布时间】：2020-05-14 20:47:54
【问题描述】：

我有一个如下表，其中 tbody 内的第一行包含列标题（我这样做是为了使列宽与 td 单元格的宽度匹配）

我想让第一行 row-header 在表格顶部浮动而不破坏列的宽度。

位置 absolute 和 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>

【问题讨论】：

这能回答你的问题吗？ Table header to stay fixed at the top when user scrolls it out of view with jQuery

标签： javascript html css html-table datatables

【解决方案1】：

添加了以下样式

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

【讨论】：

位置：如果它位于页面中间，则固定不会有帮助

【解决方案2】：

试试这个：

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

【讨论】：

迄今为止的最佳答案。它按预期工作，除了调整标题的大小似乎是改变位置。不过谢谢。
@ash1f - 很高兴它有帮助；）
@ash1f 调整大小是什么意思？请详细说明一下。
Idk 由于某种原因，当我调整它的大小时，标题似乎在表格中间晃动。

【解决方案3】：

检查下面的sn-p。

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

【讨论】：

这不是 jquery 数据表。我根本没有使用 jquery。如果您有任何香草解决方案，那就太好了\