html - 修复了可滚动 div 内的表头

转载作者：太空宇宙更新时间：2023-11-03 22:40:58

首先，确实有多个类似的问题，但它们不适用于我的情况。 Related , Other related

结构就像page > div > div > stuff + table

我正在使用 Gridstack.js这是我当前的代码

$('.grid-stack').gridstack();

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.css" />
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js'></script>

<body>
  <div class="grid-stack">
    <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="10" data-gs-height="2">
      <div class="grid-stack-item-content">
        <h3>Title</h3>
        <div>
          <input type="text">
        </div>
        <div>
          <button>Button A</button>
          <button>Button B</button>
        </div>
        <div>
          <a>Link A</a>
          <a>Link B</a>
        </div>
        <table>
          <thead>
            <tr>
              <th>ColA</th>
              <th>ColB</th>
              <th>ColC</th>
              <th>ColD</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Mauritius</td>
              <td>Castor</td>
              <td>F14 3QF</td>
              <td>dignissim.pharetra@aliquetmolestietellus.net</td>
            </tr>
            <tr>
              <td>Guyana</td>
              <td>Inuvik</td>
              <td>67752</td>
              <td>Nam.porttitor@sitamet.edu</td>
            </tr>
            <tr>
              <td>Norfolk Island</td>
              <td>Sparwood</td>
              <td>10899-987</td>
              <td>in.consectetuer@ametmetusAliquam.net</td>
            </tr>
            <tr>
              <td>Afghanistan</td>
              <td>Sant'Urbano</td>
              <td>7142</td>
              <td>lectus.convallis@ornareIn.co.uk</td>
            </tr>
            <tr>
              <td>Macao</td>
              <td>Bon Accord</td>
              <td>16-568</td>
              <td>auctor.velit.Aliquam@consectetuerrhoncus.edu</td>
            </tr>
            <tr>
              <td>Philippines</td>
              <td>Anghiari</td>
              <td>280294</td>
              <td>neque.vitae@eu.org</td>
            </tr>
            <tr>
              <td>Bangladesh</td>
              <td>Falciano del Massico</td>
              <td>90856</td>
              <td>id@vitae.edu</td>
            </tr>
            <tr>
              <td>Micronesia</td>
              <td>Divinópolis</td>
              <td>45-520</td>
              <td>scelerisque.neque@vitaesemper.co.uk</td>
            </tr>
            <tr>
              <td>Antigua and Barbuda</td>
              <td>Dudzele</td>
              <td>728363</td>
              <td>dignissim.tempor.arcu@vulputate.net</td>
            </tr>
            <tr>
              <td>Papua New Guinea</td>
              <td>Joué-lès-Tours</td>
              <td>958173</td>
              <td>amet@eleifendnondapibus.net</td>
            </tr>
            <tr>
              <td>Hong Kong</td>
              <td>Gateshead</td>
              <td>83548-761</td>
              <td>fringilla.purus@enimnec.com</td>
            </tr>
            <tr>
              <td>Iran</td>
              <td>Minto</td>
              <td>80622</td>
              <td>adipiscing.ligula@fringillaDonec.edu</td>
            </tr>
            <tr>
              <td>Curaçao</td>
              <td>Whitby</td>
              <td>59472</td>
              <td>ante@anteNunc.org</td>
            </tr>
            <tr>
              <td>Korea, South</td>
              <td>Montpelier</td>
              <td>L8 2TT</td>
              <td>a@sagittisDuisgravida.org</td>
            </tr>
            <tr>
              <td>Papua New Guinea</td>
              <td>Dokkum</td>
              <td>205204</td>
              <td>sed.libero@convallisest.co.uk</td>
            </tr>
            <tr>
              <td>New Zealand</td>
              <td>Maisires</td>
              <td>9279</td>
              <td>ultrices.posuere.cubilia@sem.org</td>
            </tr>
            <tr>
              <td>Panama</td>
              <td>Rankweil</td>
              <td>30910</td>
              <td>elit.fermentum@odio.org</td>
            </tr>
            <tr>
              <td>New Zealand</td>
              <td>Melsele</td>
              <td>23428</td>
              <td>sed.libero.Proin@nequevitaesemper.com</td>
            </tr>
            <tr>
              <td>Cuba</td>
              <td>Wolvertem</td>
              <td>93687-468</td>
              <td>auctor.odio@pellentesqueafacilisis.edu</td>
            </tr>
            <tr>
              <td>Indonesia</td>
              <td>Rothesay</td>
              <td>919761</td>
              <td>augue.scelerisque@asollicitudin.com</td>
            </tr>
            <tr>
              <td>Japan</td>
              <td>Inuvik</td>
              <td>2899</td>
              <td>massa.non@ligulaDonecluctus.org</td>
            </tr>
            <tr>
              <td>Mauritius</td>
              <td>Zeitz</td>
              <td>603912</td>
              <td>consequat@diamPellentesquehabitant.edu</td>
            </tr>
            <tr>
              <td>Curaçao</td>
              <td>Lincoln</td>
              <td>11148</td>
              <td>tristique.neque@Nullamlobortis.org</td>
            </tr>
            <tr>
              <td>Swaziland</td>
              <td>Newtown</td>
              <td>9616</td>
              <td>ipsum@sapien.ca</td>
            </tr>
            <tr>
              <td>Brazil</td>
              <td>Rodì Milici</td>
              <td>861316</td>
              <td>fames@variusultricesmauris.ca</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>

当前行为

在 div 中滚动时没有什么特别的，您首先会想到 input、links，...然后通过表格

预期行为

滚动时，当标题到达 div 的顶部时 - 标题应固定在 div 的顶部(而不是页面顶部)。向后滚动时，标题应返回其正常状态。

无需检查 div 的末尾即可隐藏标题。 div 的末尾始终是表格的末尾。

如何实现？标题不应固定在页面顶部，而应固定在 div

的顶部

注意:这也适用于 IE11

最佳答案

为你的表格添加样式

table thead tr:nth-child(1) th{
  background: RED;
  position: sticky;
  top: 0;
  z-index: 10;
}

support of sticky

$('.grid-stack').gridstack();

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
table thead tr:nth-child(1) th{
    background: RED;
    position: sticky;
    top: 0;
    z-index: 10;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.css" />
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js'></script>

<body>
  <div class="grid-stack">
    <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="10" data-gs-height="2">
      <div class="grid-stack-item-content">
        <h3>Title</h3>
        <div>
          <input type="text">
        </div>
        <div>
          <button>Button A</button>
          <button>Button B</button>
        </div>
        <div>
          <a>Link A</a>
          <a>Link B</a>
        </div>
        <table>
          <thead>
            <tr>
              <th>ColA</th>
              <th>ColB</th>
              <th>ColC</th>
              <th>ColD</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Mauritius</td>
              <td>Castor</td>
              <td>F14 3QF</td>
              <td>dignissim.pharetra@aliquetmolestietellus.net</td>
            </tr>
            <tr>
              <td>Guyana</td>
              <td>Inuvik</td>
              <td>67752</td>
              <td>Nam.porttitor@sitamet.edu</td>
            </tr>
            <tr>
              <td>Norfolk Island</td>
              <td>Sparwood</td>
              <td>10899-987</td>
              <td>in.consectetuer@ametmetusAliquam.net</td>
            </tr>
            <tr>
              <td>Afghanistan</td>
              <td>Sant'Urbano</td>
              <td>7142</td>
              <td>lectus.convallis@ornareIn.co.uk</td>
            </tr>
            <tr>
              <td>Macao</td>
              <td>Bon Accord</td>
              <td>16-568</td>
              <td>auctor.velit.Aliquam@consectetuerrhoncus.edu</td>
            </tr>
            <tr>
              <td>Philippines</td>
              <td>Anghiari</td>
              <td>280294</td>
              <td>neque.vitae@eu.org</td>
            </tr>
            <tr>
              <td>Bangladesh</td>
              <td>Falciano del Massico</td>
              <td>90856</td>
              <td>id@vitae.edu</td>
            </tr>
            <tr>
              <td>Micronesia</td>
              <td>Divinópolis</td>
              <td>45-520</td>
              <td>scelerisque.neque@vitaesemper.co.uk</td>
            </tr>
            <tr>
              <td>Antigua and Barbuda</td>
              <td>Dudzele</td>
              <td>728363</td>
              <td>dignissim.tempor.arcu@vulputate.net</td>
            </tr>
            <tr>
              <td>Papua New Guinea</td>
              <td>Joué-lès-Tours</td>
              <td>958173</td>
              <td>amet@eleifendnondapibus.net</td>
            </tr>
            <tr>
              <td>Hong Kong</td>
              <td>Gateshead</td>
              <td>83548-761</td>
              <td>fringilla.purus@enimnec.com</td>
            </tr>
            <tr>
              <td>Iran</td>
              <td>Minto</td>
              <td>80622</td>
              <td>adipiscing.ligula@fringillaDonec.edu</td>
            </tr>
            <tr>
              <td>Curaçao</td>
              <td>Whitby</td>
              <td>59472</td>
              <td>ante@anteNunc.org</td>
            </tr>
            <tr>
              <td>Korea, South</td>
              <td>Montpelier</td>
              <td>L8 2TT</td>
              <td>a@sagittisDuisgravida.org</td>
            </tr>
            <tr>
              <td>Papua New Guinea</td>
              <td>Dokkum</td>
              <td>205204</td>
              <td>sed.libero@convallisest.co.uk</td>
            </tr>
            <tr>
              <td>New Zealand</td>
              <td>Maisires</td>
              <td>9279</td>
              <td>ultrices.posuere.cubilia@sem.org</td>
            </tr>
            <tr>
              <td>Panama</td>
              <td>Rankweil</td>
              <td>30910</td>
              <td>elit.fermentum@odio.org</td>
            </tr>
            <tr>
              <td>New Zealand</td>
              <td>Melsele</td>
              <td>23428</td>
              <td>sed.libero.Proin@nequevitaesemper.com</td>
            </tr>
            <tr>
              <td>Cuba</td>
              <td>Wolvertem</td>
              <td>93687-468</td>
              <td>auctor.odio@pellentesqueafacilisis.edu</td>
            </tr>
            <tr>
              <td>Indonesia</td>
              <td>Rothesay</td>
              <td>919761</td>
              <td>augue.scelerisque@asollicitudin.com</td>
            </tr>
            <tr>
              <td>Japan</td>
              <td>Inuvik</td>
              <td>2899</td>
              <td>massa.non@ligulaDonecluctus.org</td>
            </tr>
            <tr>
              <td>Mauritius</td>
              <td>Zeitz</td>
              <td>603912</td>
              <td>consequat@diamPellentesquehabitant.edu</td>
            </tr>
            <tr>
              <td>Curaçao</td>
              <td>Lincoln</td>
              <td>11148</td>
              <td>tristique.neque@Nullamlobortis.org</td>
            </tr>
            <tr>
              <td>Swaziland</td>
              <td>Newtown</td>
              <td>9616</td>
              <td>ipsum@sapien.ca</td>
            </tr>
            <tr>
              <td>Brazil</td>
              <td>Rodì Milici</td>
              <td>861316</td>
              <td>fames@variusultricesmauris.ca</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>

关于html - 修复了可滚动 div 内的表头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44027090/

文章推荐： c# - 从静态类返回特定类型的常量字段值数组

文章推荐： html - 文本在粘性 BootStrap 页脚中垂直居中

文章推荐： c# - 如何在我的按钮中获得一个矩形以在悬停时更改颜色？

文章推荐： c++ - 计算 HOG 特征时 opencv assertion failed error-438

javascript - 表头/正文宽度问题
我有一个表格，其中有一个标题行和几行内容。现在这些实际上是 2 个单独的表: 用于标题正文内容(另一个 iframe 的一部分) 我希望列标题的宽度应与相应的正文内容相同。如何确保宽度相似且外观
Android 表头 View
我有一个 iPhone 应用程序，它有一个 UITableView 和一个标题。这是相当微不足道的，没有任何问题。 Android 中是否有类似 ListView 的东西？我试着搜索它，但没有找到真正
html - DOMPDF 表头
制作方法 a b c d e 始终可打印在每一页上。我的观
PHP 使用header函数设置HTTP头的示例解析表头
如下所示：复制代码代码如下: //定义编码 header( 'Content-Type:text/html;charset=utf-8 ');
javascript - 滚动时修复 HTML 表头
我有一个非常长的 HTML 表格，我需要修复标题的滚动问题，我找到了很多插件和技巧来完成它，但没有一个对我有用。我猜对我不起作用的原因是: 所有的解决方案都将表头从表中分离出来他们为每一列使用固定
java - 滚动 JTable 表头
我有一个包含 60 行(固定)的 JTable。每当事件发生时，该行内的单元格都会更新。当 NFC Reader 在卡上写入数据时触发该事件。这种情况每 2 或 3 秒发生一次。如果卡片写入正确
html - 下一页有不同边距的 TCPDF 表头
我需要打印一个带有重复表格的 pdf，具体取决于它在第一页中工作正常的记录数量，但在下一页表格标题更改边距，这是在 TCPDF 上显示我的表格的代码； $html= '
javascript - 隐藏一个 bootstrap 表头
我的表头看起来像这样:- Info blahh
javascript - 容器溢出时 float 表头？
我正在使用 position:fixed 在用户滚动到顶部时在我的表格中 float 一些标题，ala 这个方法:http://css-tricks.com/persistent-headers/ 在
jquery - 多行 float 表头
我正在使用这个脚本来 float 我的表格标题: http://cmcqueen1975.bitbucket.org/htmlFloatingTableHeader/tables.html 它对我的元
c# - 从逗号分隔列表生成 HTML 表头
有没有办法从逗号分隔列表构建 HTML 表头？我正在使用反射从一个类中获取属性名称。在此之前，我定义了要从该列表中排除的属性。 var toExclude = new HashSet {
ios - 表头 View 自动布局问题
我正在将自定义 UIView 的 XIB 文件加载为 View Controller 内的 uitableview 的标题 View 。 xib 文件的文件所有者是 View Controller 。
javascript - 滚动时固定 html 表头
我有以下表结构: Current New/Requested RSD &nbs
经典前端+后端+表头+表身的开发实战参考简易模板【珍藏】
前端部分（Vue 3 + Element Plus） 1. 修改 MPS002HList.vue（主生产计划列表） a. 添加查询表单在模板中添加查询表单，包含产品料号、品名、规格和年月的输入
Python BigQuery API - 获取表架构/表头
给出一个查询示例，例如 import uuid from google.cloud import bigquery def query_shakespeare(): client = bigq
Python BigQuery API - 获取表架构/表头
给出一个查询示例，例如 import uuid from google.cloud import bigquery def query_shakespeare(): client = bigq
Jquery move 表行但不 move 表头
我的表格行可以上下 move ，但我的问题是数据表行取代了表格标题(第一行)。我想要一个固定的第一行，这样当您单击向上箭头时，您就不会向上 move 该行来替换标题。我尝试了一些条件逻辑来检查当前
javascript - 使用表数据自定义 React Antd 表头
在我的React项目中，需要自定义antd表头如下我在下面添加了示例代码。我需要在“金额”列的标题中包含金额总和示例代码: https://codesandbox.io/embed/great-
使用 rowspan 的 HTML 表头
A test table with merged cells Average Redeyes heightweight 1.90.00340% 1.70.00
java - 如何将 CSS 类添加到 AbstractColumn 表头
我需要动态更改 Wicket 数据表的 CSS 类。有什么建议吗？示例代码: public class TextColumn extends PropertyColumn private stati

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 修复了可滚动 div 内的表头

当前行为

预期行为