javascript - 突出显示滚动表中的中间行-6ren

javascript - 突出显示滚动表中的中间行

转载作者：行者123 更新时间：2023-11-27 23:48:55

我想创建一个滚动表，比如说，在任何时候滚动时都可以查看 10 行，但中间的行始终突出显示，即使在滚动时也是如此。

想法是，当用户向下滚动时，中间行的类别会随着滚动而逐渐变化。

JsFiddle

我创建了一个中间行突出显示的基本表格，但是当我开始滚动时，我希望突出显示的类移动到下一行，从而产生中间行始终在中间突出显示的效果。

table {
	max-width: 980px;
	table-layout: fixed;
	margin: auto;
}

th, td {
	padding: 5px 10px;
	border: 1px solid #000;
}

thead, tfoot {
	background: #f9f9f9;
	display: table;
	width: 100%;
	width: calc(100% - 18px);
}

tbody {
	height: 300px;
	overflow: auto;
	overflow-x: hidden;
	display: block;
	width: 100%;
}

tbody tr {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.highlighted{
 background-color: coral;
}

<body>
<table>
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
      <th scope="col">Header 3</th>
      <th scope="col">Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td class= "highlighted" >Cell content</td>
      <td class= "highlighted" >Cell content</td>
      <td class= "highlighted" >Cell content</td>
      <td class= "highlighted" >Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
      <td>Footer 4</td>
    </tr>
  </tfoot>
</table>
</body>

最佳答案

尝试使用 nth-child

tbody tr:nth-child(5n) td{
 background-color: coral;
}

table {
	max-width: 980px;
	table-layout: fixed;
	margin: auto;
}

th, td {
	padding: 5px 10px;
	border: 1px solid #000;
}

thead, tfoot {
	background: #f9f9f9;
	display: table;
	width: 100%;
	width: calc(100% - 18px);
}

tbody {
	height: 300px;
	overflow: auto;
	overflow-x: hidden;
	display: block;
	width: 100%;
}

tbody tr {
	display: table;
	width: 100%;
	table-layout: fixed;
}

tbody tr:nth-child(5n) td{
 background-color: coral;
}

<body>
<table>
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
      <th scope="col">Header 3</th>
      <th scope="col">Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td class= "highlighted" >Cell content</td>
      <td class= "highlighted" >Cell content</td>
      <td class= "highlighted" >Cell content</td>
      <td class= "highlighted" >Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
      <td>Footer 4</td>
    </tr>
  </tfoot>
</table>
</body>

关于javascript - 突出显示滚动表中的中间行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56646358/

文章推荐： javascript - 带标签的 d3 圆环图

文章推荐： c++ - opengl 位于何处(gpu 软件或操作系统)？

文章推荐： javascript - 如何为 href 属性添加哈希符号

文章推荐： c++ - 包装 std::thread 调用函数

scala - Scala中列表的模式匹配结束/中间
有人可以给我一个更简单的以下代码的解决方案(它正在展开给定结构 0xFC :: len :: payload :: ... :: 0x0A :: 0x0D 的整数列表): object Payload
SSL 中间 SHA2
我已经在我的网站上安装了 SSL 证书，但 intermediate.crt 无法正常工作。任何 SSL 检查器(例如 GeoTrust Checker)都告诉我，缺少中间 key 。网站上已经使用了
html - 如何将图像垂直和水平放置在中心/中间
如何让图像从这个框的中间开始？ (中间纵横) 最佳答案有几种方法可以做到这一点，如果它需要在所有浏览器(IE7+ 和其他浏览器)中工作，你需要做不同的事情来让它在某些情况下工作。使用绝对位置
CSS:最小高度和垂直对齐:中间
如何强制 min-height 和 vertical-align:middle 为 td 元素或其内部元素工作？最佳答案 td 元素上的 height 等同于 min-height，因为如果需要，表
jquery - 滚动到元素并将其放置在 View 中间
我正在尝试自动滚动到订单簿的中间行。我有 orderBook div，其中放置了带有 orderBook 的表。该表的其中一行有一个 id middleRow。我想做的是滚动该行并将其放置在 ord
javascript - 计算变换原点以将图像缩放到视口(viewport)中间
我正在尝试在 javascript 中计算绝对定位元素的 transform-origin 属性，以便它们在悬停时填充整个视口(viewport)。我尝试通过 x 除以窗口宽度和 y 除以窗口高度来
regex - 删除开头、中间、结尾的空格
我有休闲字符串 ' this is my string ' 是否可以删除开头和结尾的所有空格，只在单词之间留一个空格。要选择我使用过的所有空间: SELECT regexp_replace('
mysql - 中间 SQL 表 : What for?
我正在设法创建我的第一个复杂的 J2E 解决方案，并且在每个教程中我都发现了某种中间表的用法，如下所示: 表:用户、用户角色、角色虽然逻辑会简单地向用户表添加一个键来引用它在角色表上的角色，但为什么要
jquery - 如何将图像元素定位在视口(viewport)中间？
我正在寻找以下解决方案。我想定位一个图像元素，例如在中间。所以高度是视口(viewport)的高度，宽度会自动设置，图像的中间应该在视口(viewport)宽度的中间。我搜索的一个例子就像下面的网
html - 中间 Bootstrap 网格类
我正在设计一种布局，它更像是注册用户的个人仪表板。我让它变得简单，使用基本的 2 列网格，一个用于侧边栏，一个用于主要内容。因为，例如，80% 的网站使用将发生在一个单独的子系统中，在无 chrom
html - 我试图将文本居中放置在我的页面 HTML 中间
我有三个不同的 div 标签(不在彼此内部)和代码，所以它有一个把单词放在左边、中间或右边，但中心非常偏离中心。这是 HTML 代码: .desc { float: right; color:
CSS 中间 div 高度
我有以下CSS http://jsbin.com/azivip/75/edit我想让黄色的 div 高度填充蓝色和绿色 div 之间的空间。使用高度继承似乎使 div 超出了绿色 div。有什么想法
html - 使用相对和绝对属性将元素定位在 div 中间
我不得不在其父元素的中间放置一些文本。我用下面的代码实现了它: #div1 { position: relative; margin: 0; padding: 0; } #div2 {
中间/链证书的 SSL 证书错误
发现一个使用合法证书(由thawte 签名)的网站，但所有浏览器都会拒绝它。我不明白为什么。thawte 的支持告诉我一个域有两个证书，然后将这个 https://www.sslshopper[dot
ssl - 中间 CA 的证书链问题
我正在尝试使用 OpenSSL 创建证书链，但出于某种原因，当我在我的计算机上安装我的根 CA 并尝试验证证书链时，它总是告诉我它找不到证书的颁发者.为了让事情发生，我必须安装中间 CA，这是没有意义
http - 中间 HTTP 缓存是什么以及在哪里
我看到 REST 的一大好处是依赖 HTTP 缓存。我不是在争论这个，而是完全认同这个想法。但是，我从来没有看到对中间 HTTP 缓存的更深入的解释。如果我将 Cache-control heade
html - 中间 Angular 左右双按钮
查看此图片 Facebook Messenger Android App Buttons ( MESSENGER\ACTIVE ) 我怎样才能做到这一点？详细信息:- 带有 2px 红色边框的 di
html - 中间 CSS 中带有白线的文本
我的任务是制作漂亮的文本，在文本中间加一条白线，如下图所示。是否可以使用 css 来实现？这是 Fiddle .container{ height:200px; width:400px;
python - 有没有办法比较阿拉伯字符而不考虑它们的初始/中间/最终形式？
在拉丁文字中，字母有大写和小写形式。在 Python 中，如果你想比较两个字符串而不考虑它们的大小写，你可以使用 'string'.upper() 或 'string'.lower() 将它们转换为相
linux - 在没有临时(中间)文件的情况下处理同一文件
我正在使用 awk 对文件进行一些文本处理。例如删除尾随空格。 awk '{gsub(/ +$/, "")} {print $0}' filename 这很好用。但是当我将输出重定向到原始文件时。它变

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 突出显示滚动表中的中间行