css - 如何固定 html 表中的标题，其中包含带有行跨度和 coll-span 的多行标题-6ren

css - 如何固定 html 表中的标题，其中包含带有行跨度和 coll-span 的多行标题

转载作者：太空宇宙更新时间：2023-11-04 00:43:49

我正在设置一个标题为 <thead> 的 html 表格与 2 <tr>其中包括 rowspan 和 colspan，我想修复它 <thead>部分在我的 html 表中

<style type="text/css">
    table#customers {
      display: table;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }

    #customers td, #customers th {
      border: 1px solid #ddd;
      padding: 8px;
    }

    #customers tr:nth-child(even){background-color: #f2f2f2;}

    #customers tr:hover {background-color: #ddd;}

    #customers th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      background-color: #2C3B49;
      color: white;
    }

</style>

这里是表格

<table id="customers">
    <thead>
        <tr>
           <th rowspan="2">rowspan="2"</th>
           <th rowspan="2">
              <center>rowspan="2"</center>
           </th>
           <th colspan="4">
              <center>colspan="4"</center>
           </th>
           <th colspan="4">
              <center>colspan="4"</center>
           </th>
           <th colspan="4">
              <center>colspan="4"</center>
           </th>
        </tr>
        <tr>
           <th>
              <center>text 1</center>
           </th>
           <th>
              <center>text 2</center>
           </th>
           <th>
              <center>text 3</center>
           </th>
           <th>
              <center>text 4</center>
           </th>
           <th>
              <center>text 1</center>
           </th>
           <th>
              <center>text 2</center>
           </th>
           <th>
              <center>text 3</center>
           </th>
           <th>
              <center>text 4</center>
           </th>
           <th>
              <center>text 1</center>
           </th>
           <th>
              <center>text 2</center>
           </th>
           <th>
              <center>text 3</center>
           </th>
           <th>
              <center>text 4</center>
           </th>
        </tr>
    </thead>
    <tbody>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
        <tr>
         <td>test</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
         <td>000</td>
        </tr>
    </tbody>
</table>

这是我制作的屏幕截图 https://prnt.sc/oz2p1f

我想要的是，整个<thead>标签将固定在两个滚动条上，我尝试了很多方法，但没有得到任何对我有帮助的完美示例。

这里有人可以帮助我吗？为此提前谢谢你

最佳答案

添加这个<div>在你的 table 周围:

<div class="tableFixHead"></div>

添加此 CSS:

.tableFixHead { overflow-y: auto; height: 400px; }

还有这个 jQuery:

var $th = $('.tableFixHead').find('thead th')
$('.tableFixHead').on('scroll', function() {
  $th.css('transform', 'translateY('+ this.scrollTop +'px)');
});

JSFiddle:https://jsfiddle.net/mvoisard/unLx7h1z/8/

关于css - 如何固定 html 表中的标题，其中包含带有行跨度和 coll-span 的多行标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57708086/

文章推荐： jquery - 单击按钮时添加水平 Accordion

文章推荐： c - C中对齐使用多少内存？

文章推荐： c - 在 C 中抽象类型实现

文章推荐： html - 如何让一个 div 将文本溢出到另一个 div

clojure:(应用 fn coll)与(应用 #(应用 fn %&)coll)
我正在通过 labrepl 工作，我看到了一些遵循此模式的代码: ;; Pattern (apply #(apply f %&) coll) ;; Concrete example user=> (a
clojure - 在 clojure 中，如果 coll 为空，(每个？pred coll)返回 true，这可能是设计缺陷吗？
来自函数 every? 的示例和对 Clojuredoc 的评论 user> (every? true? '()) ;empty is true? true user> (every? fals
python - 数据框:coll 中数组的 get_dummies
使用 Python/Pandas 我有一个非常简单的 csv 文件，除了一列:源是一个数组。我的表格示例: Column A |Column B |Column
python - 数据框:coll 中数组的 get_dummies
使用 Python/Pandas 我有一个非常简单的 csv 文件，除了一列:源是一个数组。我的表格示例: Column A |Column B |Column
clojure - 仅更新与 coll 中的 pred 匹配的第一个元素的惯用方法
我有一个 seq，(def coll '([:a 20] [:b 30] [:c 50] [:d 90])) 我想迭代 seq，并仅修改与谓词匹配的第一个元素。谓词(def pred (fn [[a
html - 如何在 bootstrap 中将 colls 居中？
我需要将浏览器窗口分成两个流畅的行，这样无论大小如何，它们都在屏幕上拉伸(stretch)。在第一行中，我需要添加应该自动居中的不同列。基本上它看起来像这样: 问题是我不能在第一行居中列并且行没有拉伸
c - Max C API 中获取 coll 对象的名称
我正在编写一个 Max MSP 外部程序。我在 Max C API 文档中迷失了几个小时，找不到从 Max C API 获取 coll 对象名称的方法。 https://cycling74.com/
javascript - 如何使用 MongoDB db.coll.find() 根据内部类中的字段进行搜索？
我正在尝试使用 MongoDB 中的 find() 命令在我的集合中查找文档，谁能解释为什么它不起作用？并执行相同的正确命令？ j = {name:"mongo",property:{type:"da
clojure - 对于 Clojure，是否有更好的 'coll' 和 'n' 位置的编码约定？
当我编写 clojure 代码时，我对何时关注 (func coll n) 感到困惑格式和 (func n coll)格式。在 Clojure/核心中，(take n coll)用于 (nth co
clojure - 在(reduce f val coll)中，val是累加器吗？
当您调用reduce并向其传递一个函数和两个参数时，第一个参数可以被视为累加器吗？它总是一个累加器吗？它有时是一个累加器吗？我正在阅读一篇关于使用 Clojure 解析大文件的博客文章，并发现了
css - 如何固定 html 表中的标题，其中包含带有行跨度和 coll-span 的多行标题
我正在设置一个标题为的 html 表格与 2 其中包括 rowspan 和 colspan，我想修复它部分在我的 html 表中 table#customers { dis
azure - 语义错误: Unsupported calculated column name GET/dbs/*/colls/*/pkranges Kusto
我的 kusto 查询中有计算列。现在列名之一是“GET/dbs//colls//pkranges”。运行查询时我遇到此错误 Semantic error: Unsupported calculat

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 如何固定 html 表中的标题，其中包含带有行跨度和 coll-span 的多行标题