记录：固定table表头不动内容滚动

最新推荐文章于 2024-08-13 17:19:23 发布
最新推荐文章于 2024-08-13 17:19:23 发布
阅读量787 收藏
点赞数
文章标签： c# xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/LeimOO/archive/2009/07/13/1522768.html
版权

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>Untitled Page</title>

<style>

.title{width:100%;background:#EFEFEF; border:1px solid gray;}

.content{width:100%;sborder:1px solid black; border-top:0px; height:300px; overflow-y:scroll; overflow-x:hidden;}

 

td{background:white; font-size:9pt; color:blue; padding-left:5px;}

 

</style>

</head>

<body>

 

<div class="title">

<input type="button" value="TestBtn" style="border:1px solid black;" />

</div>

<div class="content">

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

Test<br />

</div>

    <table border="0" cellpadding="4" cellspacing="1" style="background:black;">

        <tr>

            <td style="width: 100px">aaa

            </td>

            <td style="width: 100px">fff

            </td>

            <td style="width: 100px">bbb

            </td>

        </tr>

        <tr>

            <td style="width: 100px">ddd

            </td>

            <td style="width: 100px">wefwe

            </td>

            <td style="width: 100px">wfwef

            </td>

        </tr>

        <tr>

            <td style="width: 100px">wef

            </td>

            <td style="width: 100px">wef

            </td>

            <td style="width: 100px">wf

            </td>

        </tr>

    </table>

 

 

</body>

</html>

 

 

转载于:https://www.cnblogs.com/LeimOO/archive/2009/07/13/1522768.html

weixin_30252155
关注
css固定table表头的实现代码可同时看到表头和表格底部
09-25
这样一来，用户就不能同时看到表格顶部的表头信息和表格底部的数据记录，这对于数据分析和比对带来了不便。为了解决这个问题，可以采用固定表头的方法，即无论用户如何滚动表格，表头始终固定在页面的顶部。 使用...
table 滚动时固定表头
hfhwfw161226的博客
10-12 517
表格内容过多时，仅滚动数据，表头不动。
element的table表格表头不动，内容横向竖向滚动，前两列设置了fixed，会出现的bug，用下面的方法可以解决
m0_73738273的博客
05-11 301
【代码】element的table表格表头不动，内容横向竖向滚动，前两列设置了fixed，会出现的bug，用下面的方法可以解决。
在HTML中固定表格表头的简单方法
最新发布
yivifu的专栏
08-13 423
表文介绍了一种不使用JavaScrip也不用第三方插件简单实现在HTML页面中固定表头滚动表格的效果。
el-table显示滚动条，但表头固定（解决方法）
weixin_38345306的博客
03-07 6304
el-table显示滚动条，但表头固定（解决方法）
第十二篇：element ui table表格表头固定，下边表格滑动
maliyao4233的博客
07-14 2271
注意：我说的这个方法适用于如果下边多一行是计算结果。如果正常的表格滚动就不用这么麻烦。问题：表格固定，但是滑动的时候表头也动的解决办法。给顶部标题导航加个定位就好了。
Table的思索(二):表头固定而内容滚动的表格
热门推荐
甘焕的博客
08-03 2万+
产品要求表格的表头固定，而内容在超出table的高度后，还能自由滚动，难度较高，本文尝试了几种常用方法，但都经历了失败，最后给出了一种可行的解决方案。
table 第一行第一列 固定
06-02
标题 "table 第一行第一列 固定" 描述的是一个网页设计中的常见需求，即在表格（table）中实现第一行或第一列在用户滚动页面时保持固定显示。这种效果通常用于数据量大且需要横向或纵向滚动查看的表格，以便用户始终...
bootstrap table.js动态填充单元格数据的多种方法
12-01
有时我们可能希望表头固定不动，而表格的主体部分动态填充数据。这可以通过结合Bootstrap的样式和`bootstrap-table.js`的功能实现。 ```html <table id="table-javascript" class="table table-hover table-...
vueTableFixSelf:table插件源码修改
03-23
`vueTableFixSelf` 可能是一个基于Vue.js开发的开源表格插件，专门用于处理固定表头、列宽等与表格显示相关的问题。这个插件可能在原有基础上进行了定制，以满足特定项目的需求，因此涉及到了源码的修改。 源码修改...
element table头部固定，内容滚动
weixin_49511142的博客
04-01 1431
思路：首先我们要给table表格套一层父元素，然后获取这个父元素的高度，同时获取表格的表头的高度以及分页的高度。然后用父元素的高度减去表头和分页的高度即是table表格的高度，然后再把这个高度赋值给。2.然后我又想会不会是数据过多，我先获取了dom，然后数据渲染后的dom我们高度不一致，里面进行监听，等数据回来后再获取dom，这样总可以了吧，但是事实总是残酷的，又失败了。3. 最后大家别忘了销毁监听器。
完美解决html表格表头固定存在的问题
qq_44765467的博客
09-20 2325
完美解决html表格表头固定存在的问题    当表格数据较多出现滚动条时，很多地方都有固定表头的需求。在网上查找资料，发现了一个比较简洁的方法。 代码如下： 1.css样式： th{ background-color: brown; } table,th,td{ border:1px solid gray; padding:2px; text-align: center; } ...
vue3 如何实现 表格内容无缝滚动，我又写了一堆冗余代码
洋茄子炒鸡蛋的博客
03-24 9690
近期在开发可视化大屏项目，除去各种echarts图表和地图展示之外还有多个表格。现在来了一个需求，需要将大屏中的所有表格设置为内容无缝滚动。本着程序员的七宗罪原则第一时间推脱了一下，但没推脱成功。
用原生table作出表头不动，下拉滚动效果
u012174809的专栏
09-23 741
原本是用vue+element做前端的,因为业务需要，要一次性加载所有数据，发现用el-table很卡，于是改用原生table,话说，在性能，自由发挥上，还是原生的好，效果见下图 之前在另一公司遇到这种需求我是用两个table解决，但是，会有点问题。现在这公司比较严格，在于是百度，我选择了用一个table做这种效果，这样不会存在我以前做的时候了现的问题。 见代码，请忽略数据填充逻辑，主要靠css来完成这个想法。 <div class="monTbale-body"> .
html table 表头不动,js实现表头不动，表格内容无限循环滚动
weixin_34335039的博客
06-17 1240
表头不动，只有内容无限循环滚动，代码如下：html部分：组织排名组织名称组织积分css部分：.table{width: 100%;}.content {width: 434px;height: 182px;outline: 1px solid #e5e5e5;overflow: hidden;}.data-content tr:nth-child(odd){background-color: #f...
table表头不换行并允许横向滚动
xiaouncle的博客
02-09 4970
一、滚动条一直显示 在&lt; td&gt;中加入nowrap=”nowrap”即可实现内容不换行的效果；滚动条效果需要通过设置overflow来实现。 &lt;div id="test" style="width: 800px; height: 80px; overflow-x: auto;overflow-y: hidden"&gt; &lt;table&gt; ...
vue实现列表自动滚动效果
qq_40875789的博客
10-15 1332
3.在页面中使用（写一个固定的表头 el-table:show-header="status" 设置为false,自带的表头不显示）2.在main.js中引入注册。4.js配置滚动插件配置对象。
前端-表头固定，内容滚动
面朝大海，春暖花开
06-12 2563
原理： 利用两个table，一个div包装一个table表头，一个div包装一个table的body #div-table-wrapper { width: 500px; margin-top: 50px; margin-left: 200px; margin-bottom: 100px; }
vue实现table自动滚动
芳草萋萋鹦鹉洲哦
06-12 4929
客户需求：右下角表格实现自动滚动本案例中没有使用任何第三方插件，全部使用vue中相关的js、css以及定时器方式实现。解决问题的第一步不是找代码，而是分析问题。列表自动滚动常见方式有两种（上下左右的滚动不赘述，只是方向的问题，本案例以向上自动滚动为例）：（1）匀速滚动 （2）有间隔的平滑滚动。本案例先给出匀速滚动的方案。要匀速向上滚动，以我的经验，最容易想到的是用定时器实现，每隔一个时间差，列表向上移动一个像素（大于一个像素，可能会在视觉上给人卡顿掉帧的感觉），在时间够短的前提下，就会给人一种匀速向上的
css table 表头不动 内容滚动
06-03
要实现表头不动，内容可滚动的效果，可以使用 CSS 的表格布局和固定定位。 首先，将表格布局设置为固定布局 `table-layout: fixed;`，然后将表头设置为固定定位 `position: fixed;`，并设置表头的宽度和每列单元格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值