javascript - 保持表头可见而不在表体中显示滚动条-6ren

javascript - 保持表头可见而不在表体中显示滚动条

转载作者：太空宇宙更新时间：2023-11-04 01:16:05

我正在制作一个带有表格数据的页面，该页面可以使用主页滚动条滚动，但保持表头可见。页面顶部有页眉，页面底部有分页区域。

我在这里试了一下。

var dataHeader = document.querySelector('.data thead');

var scrollValue = 50;

window.onscroll = function () {
    if (document.body.scrollTop > scrollValue || document.documentElement.scrollTop > scrollValue) {
        dataHeader.className = "fixed";
    } else {
        dataHeader.className = "";
    }
};

.main {
  position: relative;
  top: 0;
  width: 700px;
  margin: 0 auto;
}
.header {
  position: fixed;
  top: 0;
  background-color: #abc;
  width: 700px;
  z-index: 10;
}

.content {
  position: relative;
  top: 60px;
  background: #cfe;
}

.content-header {
  color: blue;
  padding-top: 10px;
}

.data {
  position: relative;
  margin-bottom: 18px;
}

.data table {
  border-collapse: collapse;
  width: 700px;
}

.data thead {
  background: grey;
  width: 700px;
  display: table-header-group;
}

.data tbody {
  width: 700px;
}

.data thead.fixed {
  position: fixed;
  top: 80px;
}

.data thead.fixed th {
  width: 90px;
}

.paging {
  position: absolute;
  bottom: 0;
  background-color: black;
  color: white;
  width: 700px;
}

.column {
  padding: 2;
  width: 80px;
}

<div class="main">

  <div class="header">
    <h1>Super Page</h1>
  </div>

  <div class="content">

    <div class="content-header">
      <h2>Beautiful Content</h2>
    </div>

    <div class="data">
      <table>
        <colgroup>
          <col class="column">
          <col class="column">
          <col class="column">
        </colgroup>
        <thead>
          <tr>
            <th class="column">Sr</th>
            <th class="column">City</th>
            <th class="column">Country</th>
          </tr>
          <thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Amsterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Lahore</td>
                <td>Pakistan</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Doha</td>
                <td>Qatar</td>
              </tr>
              <tr>
                <td>4</td>
                <td>Mumbai</td>
                <td>India</td>
              </tr>
              <tr>
                <td>5</td>
                <td>Rotterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>6</td>
                <td>Amsterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>7</td>
                <td>Lahore</td>
                <td>Pakistan</td>
              </tr>
              <tr>
                <td>8</td>
                <td>Doha</td>
                <td>Qatar</td>
              </tr>
              <tr>
                <td>9</td>
                <td>Mumbai</td>
                <td>India</td>
              </tr>
              <tr>
                <td>10</td>
                <td>Rotterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>11</td>
                <td>Amsterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>12</td>
                <td>Lahore</td>
                <td>Pakistan</td>
              </tr>
              <tr>
                <td>13</td>
                <td>Doha</td>
                <td>Qatar</td>
              </tr>
              <tr>
                <td>14</td>
                <td>Mumbai</td>
                <td>India</td>
              </tr>
              <tr>
                <td>15</td>
                <td>Rotterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>16</td>
                <td>Amsterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>17</td>
                <td>Lahore</td>
                <td>Pakistan</td>
              </tr>
              <tr>
                <td>18</td>
                <td>Doha</td>
                <td>Qatar</td>
              </tr>
              <tr>
                <td>19</td>
                <td>Mumbai</td>
                <td>India</td>
              </tr>
              <tr>
                <td>20</td>
                <td>Rotterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>21</td>
                <td>Prague</td>
                <td>Czech Republic</td>
              </tr>
            </tbody>
      </table>
    </div>
    <!-- /.data -->

    <div class="paging">
      Displaying 10 of 100 records
    </div>
  </div>
  <!-- /.content -->

</div>
<!-- /.main -->

唯一的问题是当我向下滚动时，表格标题会折叠并且不会与表格主体的列保持对齐。我该如何解决？

最佳答案

你可以调整你的 .data thead.fixed th 规则为 width: calc(700px/3); 像这样:

var dataHeader = document.querySelector('.data thead');

var scrollValue = 50;

window.onscroll = function () {
    if (document.body.scrollTop > scrollValue || document.documentElement.scrollTop > scrollValue) {
        dataHeader.className = "fixed";
    } else {
        dataHeader.className = "";
    }
};

.main {
  position: relative;
  top: 0;
  width: 700px;
  margin: 0 auto;
}
.header {
  position: fixed;
  top: 0;
  background-color: #abc;
  width: 700px;
  z-index: 10;
}

.content {
  position: relative;
  top: 60px;
  background: #cfe;
}

.content-header {
  color: blue;
  padding-top: 10px;
}

.data {
  position: relative;
  margin-bottom: 18px;
}

.data table {
  border-collapse: collapse;
  width: 700px;
}

.data thead {
  background: grey;
  width: 700px;
  display: table-header-group;
}

.data tbody {
  width: 700px;
}

.data thead.fixed {
  position: fixed;
  top: 80px;
}

.data thead.fixed th {
  width: calc(700px/3);  
}

.paging {
  position: absolute;
  bottom: 0;
  background-color: black;
  color: white;
  width: 700px;
}

.column {
  padding: 2;
  width: 80px;

<div class="main">

  <div class="header">
    <h1>Super Page</h1>
  </div>

  <div class="content">

    <div class="content-header">
      <h2>Beautiful Content</h2>
    </div>

    <div class="data">
      <table>
        <colgroup>
          <col class="column">
          <col class="column">
          <col class="column">
        </colgroup>
        <thead>
          <tr>
            <th class="column">Sr</th>
            <th class="column">City</th>
            <th class="column">Country</th>
          </tr>
          <thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Amsterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Lahore</td>
                <td>Pakistan</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Doha</td>
                <td>Qatar</td>
              </tr>
              <tr>
                <td>4</td>
                <td>Mumbai</td>
                <td>India</td>
              </tr>
              <tr>
                <td>5</td>
                <td>Rotterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>6</td>
                <td>Amsterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>7</td>
                <td>Lahore</td>
                <td>Pakistan</td>
              </tr>
              <tr>
                <td>8</td>
                <td>Doha</td>
                <td>Qatar</td>
              </tr>
              <tr>
                <td>9</td>
                <td>Mumbai</td>
                <td>India</td>
              </tr>
              <tr>
                <td>10</td>
                <td>Rotterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>11</td>
                <td>Amsterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>12</td>
                <td>Lahore</td>
                <td>Pakistan</td>
              </tr>
              <tr>
                <td>13</td>
                <td>Doha</td>
                <td>Qatar</td>
              </tr>
              <tr>
                <td>14</td>
                <td>Mumbai</td>
                <td>India</td>
              </tr>
              <tr>
                <td>15</td>
                <td>Rotterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>16</td>
                <td>Amsterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>17</td>
                <td>Lahore</td>
                <td>Pakistan</td>
              </tr>
              <tr>
                <td>18</td>
                <td>Doha</td>
                <td>Qatar</td>
              </tr>
              <tr>
                <td>19</td>
                <td>Mumbai</td>
                <td>India</td>
              </tr>
              <tr>
                <td>20</td>
                <td>Rotterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>21</td>
                <td>Prague</td>
                <td>Czech Republic</td>
              </tr>
            </tbody>
      </table>
    </div>
    <!-- /.data -->

    <div class="paging">
      Displaying 10 of 100 records
    </div>
  </div>
  <!-- /.content -->

</div>
<!-- /.main -->

关于javascript - 保持表头可见而不在表体中显示滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50114978/

文章推荐： python - 为什么在尝试安装 FiPy 时出现错误？

文章推荐： python - 如何从 python 中的 subprocess.call 获取一行

Android，保持 View
我的应用程序包含两部分:网络部分和 GUI。它的工作方式有点像浏览器 - 用户从服务器请求一些信息，服务器发回一些代表某些 View 的数据，然后 GUI 显示它。现在我已经将网络部分实现为一项服务
go - 在golang中的表达式中检查括号是否平衡[保持]
给定表达式字符串exp，编写程序检查exp中“{”、“}”、“（”、“）”、“[”、“]的对和顺序是否正确。 package main import ( "fmt" stack "gi
python - 保持 Python 脚本运行的简单方法？
我想要一个简单的脚本在后台保持运行。目前看起来像这样: import keyboard while True: keyboard.wait('q') keyboard.send('ct
tomcat - 保持 Tomcat 更新的策略？
我维护着许多 RedHat Enterprise Linux(7 台和 8 台)服务器(>100 台)，其中包含不同的应用程序。为了保持理智，我当然会使用 Ansible 等工具，更重要的是，公共(p
Winforms:保持 Winforms 应用解锁的最佳方式？
我有一个 winforms 应用程序，它在网络服务请求期间被锁定我已经尝试使用 doEvents 来保持应用程序解锁，但它仍然不够响应，我怎样才能绕过这个锁定，让应用程序始终响应？最佳答案最好
vba - 保持/插入前导 0
我正在努力在我的项目中获得并保持领先的 0。以下是当前相关的代码: Dim jobNum As String jobNum = Left(r1.Cells(1, 1), 6) r2.Cells(1
c# - 保持 Canvas 元素相对于背景图像定位
我正在尝试在我的 Canvas 中定位元素相对于我的背景。窗口被重新调整大小，保持纵横比。背景随着窗口大小而拉伸(stretch)。问题是一旦重新调整窗口大小，元素位置就会不正确。如果窗口的大小
java - 保持 OneToMany 关系只保持集合中的第一个对象？
一直在玩弄 Hibernate 和 PostgreSQL，试图让它按预期工作。但是由于某种原因，当我尝试将具有@OneToMany 关系的对象与集合中的多个项目保持一致时，除了第一个项目之外，所有项
github - 保持 fork 最新
我想将某些东西提交到 github 存储库，但我(显然)没有任何权利这样做。我对那个 repo 做了一个分支，提交了我的更改并提交了一个 pull-request。现在，问题是过了一段时间其他人已经
julia - 保持/循环具有相同抽象父类型的对象集合的最佳实践 (Julia)
这是一个初学者问题，我仍在考虑“在 OOP 中”，所以如果我错过了手册中的答案或者答案很明显，我深表歉意。假设我们有一个抽象类型， abstract type My_Abstract_type en
javascript - 保持 jQuery 最新的实用方法？
我们正在开展的一些项目在 jQuery 1.4.2 或更早版本中有着深厚的根基，介于缺乏最新版本的性能优势(或语法糖)、使用现已弃用的方法的耻辱以及部署一个积极维护的库的 3 年以上旧版本，升级现在迫
iphone - 保持 FMDB 线程安全
我看到在FMDB 2.0中，作者为线程添加了FMDatabaseQueue。例子是: // First, make your queue. FMDatabaseQueue *queue = [FMDa
cocoa - 保持 NSScrollView 固定
我在 NSScrollView 中有一个 NSTableView。 NSTableView 的内容是通过绑定(bind)到 NSArrayController 来提供的，而 NSArrayContro
WPF 保持 TreeView 列表排序
我在 TreeView 上有一个节点，我手动填充该节点并希望保持排序。通过用户交互，TreeViewItem 上的标题可能会更改，它们应该移动到列表中的适当位置。我遍历一个 foreach，创建多个
macos - 保持 NSWindow 最前面
我从主 NSWindow 打开一个 NSWindow。 DropHereWindowController *dropHereWindowController = [[DropHereWindowCon
delphi - 按钮(保持 "up"或 "down")
我需要放置一个 form 3 按钮，当我单击该按钮时，将其显示为按下，其他按钮向上，当我单击另一个按钮时，它应该为“向下”，其他按钮应为“向上” 最佳答案所有按钮的属性“Groupindex”必须设
perl - 保持 perl 脚本运行
我有一个使用 AnyEvent::MQTT 订阅消息队列的 perl 脚本。目前我想要它做的就是在收到消息时打印出来。我对 perl 完全陌生，所以我正在使用它附带的演示代码，其中包括将 STDIN
.net - 保持 TreeView 的滚动位置
如何在 .NET 应用程序中保持 TreeView 控件的滚动位置？例如，我有一个树形 View 控件，并经历了一个向其添加各种节点的过程，并将它们固定在底部。在此过程中，我可以滚动浏览 TreeVi
vbscript - 保持 VBScript 的组织性
我维护了大量的 vbscripts，用于在我的网络上执行各种启动脚本，并且有一些我在几乎所有脚本中使用的函数。除了复制和粘贴之外，有没有人对我如何创建可重用 vbscript 代码库有建议。我并不反
azure - 保持 Azure 自托管代理运行和连接
我有一些关于 Azure 自托管的问题。假设用户 Alex 在物理机 M 上设置了 Windows 自托管代理。当 Alex 注销且计算机进入休眠状态时，代理将脱机。现在，当 Bob 登录同一台计算

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 保持表头可见而不在表体中显示滚动条