普通表格头部固定

最新推荐文章于 2024-07-25 14:21:05 发布
最新推荐文章于 2024-07-25 14:21:05 发布
阅读量895 收藏
点赞数
分类专栏： CSS 文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/p930318/article/details/121925930
版权 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
  <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
  <style>
    table {
      position: relative;
    }

    table thead,
    table tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
      text-align: center;
    }

    table tbody tr {
      box-sizing: border-box;
    }

    table thead {
      width: calc(100% - 1.3em);
      position: absolute;
      z-index: 99
    }

    table tbody {
      display: block;
      height: 500px;
      overflow-y: scroll;
      overflow-x: auto;
      padding-top: 40px;
      box-sizing: border-box;
      border-bottom: 1px solid #e6e6e6
    }
  </style>

</head>

<body>
  <div class="layui-card-body" id="divContent" style="padding-bottom: 0px">
    <div class="table-container">

      <table class="layui-table">

        <thead>
          <tr>
            <th>姓名</th>
            <th>角色</th>
            <th>年龄</th>
            <th>出生日期</th>
          </tr>
        </thead>


        <tbody>
          <tr>
            <td>张三</td>
            <td>管理员</td>
            <td>9</td>
            <td>2019-01-01T00:00:00</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>超级管理员</td>
            <td>21</td>
            <td>2020-01-01T00:00:00</td>
          </tr>
          <tr>
            <td>王五</td>
            <td>系统管理员</td>
            <td>22</td>
            <td>2021-01-01T00:00:00</td>
          </tr>
          <tr>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>2021-12-13T14:03:12.417</td>
          </tr>
          <tr>
            <td>22</td>
            <td>22</td>
            <td>22</td>
            <td>2021-12-13T14:03:16.667</td>
          </tr>
          <tr>
            <td>33</td>
            <td>33</td>
            <td>33</td>
            <td>2021-12-13T14:03:33.033</td>
          </tr>
          <tr>
            <td>44</td>
            <td>44</td>
            <td>44</td>
            <td>2021-12-13T14:03:37.913</td>
          </tr>
          <tr>
            <td>55</td>
            <td>55</td>
            <td>55</td>
            <td>2021-12-13T14:03:42.283</td>
          </tr>
          <tr>
            <td>66</td>
            <td>66</td>
            <td>66</td>
            <td>2021-12-13T14:03:45.967</td>
          </tr>
          <tr>
            <td>77</td>
            <td>77</td>
            <td>77</td>
            <td>2021-12-13T14:03:50.337</td>
          </tr>
          <tr>
            <td>88</td>
            <td>88</td>
            <td>88</td>
            <td>2021-12-13T14:03:54.467</td>
          </tr>
          <tr>
            <td>99</td>
            <td>99</td>
            <td>99</td>
            <td>2021-12-13T14:03:58.67</td>
          </tr>
          <tr>
            <td>100</td>
            <td>100</td>
            <td>100</td>
            <td>2021-12-13T14:04:07.317</td>
          </tr>
          <tr>
            <td>101</td>
            <td>102</td>
            <td>103</td>
            <td>2021-12-13T14:04:17.823</td>
          </tr>
          <tr>
            <td>105</td>
            <td>105</td>
            <td>105</td>
            <td>2021-12-13T14:04:32.1</td>
          </tr>
          <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>2021-12-13T14:04:37.583</td>
          </tr>
          <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2021-12-13T14:04:41.8</td>
          </tr>
          <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>2021-12-13T14:04:49.717</td>
          </tr>
          <tr>
            <td>4</td>
            <td>4</td>
            <td>4</td>
            <td>2021-12-13T14:04:53.833</td>
          </tr>
          <tr>
            <td>66z</td>
            <td>5</td>
            <td>5</td>
            <td>2021-12-13T14:05:00.35</td>
          </tr>
        </tbody>


      </table>
    </div>
  </div>
</body>

</html>

大可大可抖
关注
专栏目录
android固定头部和侧边表格实现
～Hello,Wicky //
07-13 2622
哈哈，感觉下CSDN的新版本编辑器，至少看起来还挺不错的，之前的编辑器插入代码很不方便，发布后会出现源代码，还估计是一个bug.言归正传，这次要记录的是android怎么实现表格头、侧边固定滑动，并且实现纵向的合并，本来自我感觉良好，后来被群友告知这个有一个开源框架可以实现，想想自己的傻傻的去实现，累觉不爱，anywhere，已经写好了就只能安慰自己以后出现问题了方便修复吧，毕竟这是自己的东西。先看
html表格固定右侧列,jQuery锁定表头和固定列插件FixedTable
weixin_36039533的博客
05-31 1020
插件描述：fixedTable是普通table的一个变体，在后台管理中我们经常使用表格，一个表格会有很多的列，并且每一列的长度还必须那么长，可能最后一列会有很多的操作按钮，这就会导致有很多的列会换行，FixedTable就是其中的解决方案之一更新时间：2020-06-0323:53:07更新内容：jQuery版本表格宽度算法优化更新时间：2017/9/30 下午11:19:40更新说明：修复aj...
解决layui表格的表头不滚动的问题
10-16
今天小编就为大家分享一篇解决layui表格的表头不滚动的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决Layui表格需表头固定悬浮的问题
热门推荐
撒野
06-30 1万+
当表格过长，表头离开页面可视范围时把表头固定悬浮在上面，如下: 思路：问题的关键是如何知道表头是否超出可视范围，首先我们需要知道表头到文档顶部的距离，这个距离是不会变的（除非操控DOM）,然后监听滚动条滚动的距离。如果前者减去后者小于0，则表示离开了可视范围。 先在Layui表格渲染完成的回调函数里写： done: function () {//表格渲染完成的回调函数 var headertop = $(".layui-table-header").offset().to
Layui表格向下滑动时表头固定悬浮
weixin_43652106的博客
07-25 459
Layui表格向下滑动时表头固定悬浮
layui动态固定表格表头
岁月如歌去，十年弹指间
05-07 1757
.table-sticky-head .layui-table tbody{ height: calc(100vh - 325px); display: block; overflow-y: scroll; overflow-x: scroll; width: 100vw; } .table-sticky-head .layui-table tbody::-webkit-scrollbar { display: none; } .table-sticky-he..
layui渲染表格实现表格头部固定
yty120的博客
10-21 769
适用情景：为layui的渲染表格添加一个表头可以随右边框移动固定的功能 JQ代码：
jQuery带滚动条头部固定表格代码.zip
11-20
在这个例子中，JavaScript可能用于监听滚动事件（scroll event），当用户滚动页面时，通过计算滚动位置来调整表格头部的位置，保持其始终可见。 4. **jQuery**： jQuery是一个流行的JavaScript库，简化了DOM操作、...
移动端table固定表头与固定第一列
02-20
在创建表格时，我们通常会使用`<thead>`定义表头，`<tbody>`定义表格主体，`<tr>`定义行，`<th>`定义表头单元格，`<td>`定义普通单元格。在移动端，由于屏幕宽度限制，我们需要让表头和第一列在滚动时保持固定。 ...
android固定标题表格,Android使用TableLayout之固定表头(标题栏)
weixin_42205405的博客
05-26 785
TableLayout布局的效果就是整齐的表格，看着非常舒心。当遇到数据较多时，可以添加到ScrollView和HorizontalScrollView进行上下和左右的滑动。左右滑动的体验性一般比较合理，但是上下滑动就有些不舒心了。因为常规中，第一行数据是表头，即所谓的列名，在上下滑动的时候标题列也随着滑动而隐藏掉。这就导致看下面的数据时不知道每列的数据指的是什么，体验性就比较差。理想的做法就是固...
Layui 渲染table 复杂头部固定，高度显示不一致
zcc_wd的博客
04-09 452
整体前面固定的高度比没有固定的高度多出好多，看的变扭，还不美观，在网上翻了半天都没有找到办法，后来发现是因为rowspan导致colspan的高度和他的子级高度都是78px。把style的高度去掉，样式会恢复到默认样式的高度，后来用了很多方法都不太能去掉，只能用笨方法，去除高度。
layui表格table固定表头第一行固定显示
webnoties的专栏
09-09 6620
layui表格table固定表头第一行固定显示 代码示例如下： layui.use('table', function(){ $ = layui.jquery; var table = layui.table; table.render({ elem: '#listtable', url: '/admin/getList/', //数据接口 page: true, //开启分
layui table处理奇葩后台数据实现复杂表头固定列功能
lianzhang861的博客
07-05 2408
公司要求在手机上实现复杂表头表格，可以第一列固定，其他滑动的table功能，我看了下，在elementui中有这个功能，但是它的多级表头需要实现上下级的对象关系，而后台给我们返回的数据都是用colspan,rowspan渲染表头的，所以这个插件无法使用。 然后退而求其实，使用比较简单的layui中的table，因为它的ui做的还可以。 layui table 的复杂多级表头是支持表头使用rowspan和colspan 的。 文档：https://www.layui.co...
使用layui流加载，CSS解决如何固定表头，以及解决表格表头和表格内容对不齐问题
wr793455561的博客
10-15 9440
先上HTML部分的代码： &lt;table class="layui-table"&gt; &lt;thead class="top-head"&gt; &lt;tr&gt; @for(var item in zkColumnDescs){ @if(item.field != 'equipId'){ &lt;th class=...
layui多表头加固定列
红尘残雪
02-20 782
【代码】layui多表头加固定列。
固定表头和第一列、内容可滚动的table表格
03-24 358
https://www.jianshu.com/p/61c52ffced0c
使用粘性定位实现列固定可左右滑动的table布局
weixin_43827779的博客
09-09 1217
<template> <div class="base-table"> <header class="base-table__title">表格标题</header> <div class="base-table__body list-content"> <table> <tr> <th>固定1</th> <
css 表头固定
qq_42855675的博客
05-31 420
.layui-table th:first-child { border-left: 0px; } .layui-table tbody tr td:first-child { border-left: 0px; } .layui-table th, .layui-table td { border-wi...
freemaker表格固定头部
最新发布
09-11
在Freemarker中，如果你想要创建一个表格并且保持表头固定，你可以使用`<table>`标签，并结合CSS来实现这个效果。通常的做法是： 1. 使用HTML `<thead>`标签来定义表头部分，这会使得这部分独立于表格内容而滚动。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值