HTML中table带滚动条而标题栏不移动的做法

最新推荐文章于 2024-08-13 11:49:05 发布
最新推荐文章于 2024-08-13 11:49:05 发布
阅读量2w 收藏 4
点赞数
分类专栏： html类 文章标签： table html border div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/njyky/article/details/2511695
版权

首先申明做法有很多,介绍其中一种.

<html>

<body>

<table width="100%" align="center" border=0>

       <tr>

       <table  width="100%"  border=1>

       <tr>

              <td width="50%">

                     biaoti1321

              </td>

              <td width="50%">

                     biaoti2321321

              </td>

           <td>

                     &nbsp;

              </td>

       </tr>

       </table>

       </tr>

   <tr>

   <td align="center" width="100%">

    <div  style="overflow-y:auto; width:100%;height:100px">

    <table width="100%" border=1>

       <tr>

              <td>111</td>

              <td>111</td>

       </tr>

              <tr>

              <td>111</td>

              <td>111</td>

       </tr>

              <tr>

              <td>111</td>

              <td>111</td>

       </tr>

              <tr>

              <td>111</td>

              <td>111</td>

       </tr>

              <tr>

              <td>111</td>

              <td>111</td>

       </tr>

              <tr>

              <td>111</td>

              <td>111</td>

       </tr>

              <tr>

              <td>111</td>

              <td>111</td>

       </tr>

              <tr>

              <td>111</td>

              <td>111</td>

       </tr>

              <tr>

              <td>111</td>

              <td>111</td>

       </tr>

   </table>

    </div>

   </td>

  

   </tr>

 </table>

 </body>

 </html>

 

具体思路这个是一个大table，然后表头与结果域各一个table，

表头的标题是N个，那么就需要分N＋1个td，前面N个TD的width总和为100％，最后1个为了给滚动条位置，不然不好与下面table对齐。

下面的结果体table需要包含在div中，设置td的长度与上面td长度要保持一致，这样就可以了。

南京创业者
关注
专栏目录
css表格标题不滚动,纯CSS实现标题栏、表格头水平滚动垂直不滚动
weixin_42522817的博客
08-04 818
一、需求描述有些报表会很宽，浏览器水平放不下，需要水平滚动显示，这个可以设置overflow-y:hidden实现，很基本的实现，没什么难度。但是，如果同时希望垂直滚动的时候，表格头是固定的。此时该如何实现呢？此时，使用传统的position:fixed定位是不行的，因为此时水平滚动也会纹丝不动。此时可以试试position:sticky粘性定位试试。二、粘性定位实现先看下实现的效果：//zxx:...
layui表头跟随滚动条滑动_侧边栏实现随滚动条滑动固定的效果
weixin_35219046的博客
12-23 1514
最近在一些博客看到侧边栏某些板块，随着滚动条的滑动，而跟着滑动或者固定的效果，感觉非常的人性化，一来可以弥补当一个页面很长，但侧边栏太短的时候的空白，二来可以合理利用空间展示更多信息，可以大大的提高曝光率和点击率。这样子的效果很适合于文章的列表(比如月度排行、热门文章之类的)，还有适合于广告联盟的展示。所以去网上找了一些资料，整理了一下，现在分享给大家，也方便以后自己查阅，希望对大家有用。效果一：...
纯css实现table滚动条(纯css实现div滚动条)
04-23
纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.
CSS3自定义滚动条样式 -webkit-scrollbar
热门推荐
韩世雷 程序员专栏
10-23 30万+
有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如何自定义滚动条的呢？ 前言 webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。 演示
html 关于table合并外边框以及自动滚动问题汇总
lfl18326162160的博客
08-13 290
固定高度显示上下滑动。
table实现表头不动，而数据滚动操作
w375179337的专栏
02-05 1万+
   New Document            body,table, td, a {font:9pt;} /*重点：固定行头样式*/.scrollRowThead{position: relative; left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);z-i
CSS设置table下只有tbody的展现滚动条，表头不动
binghuozhi的博客
11-13 1609
直接上代码，大家可以参考下 <style type="text/css"> table tbody { display:block; height:314px; overflow-y:scroll; -webkit-overflow-scrolling: touch; } /* tbody的滚动条是否显示 */ table tbod...
table禁止标题行随数据行滚动的简单实现
不善言谈者
05-29 655
在工作中,总是会遇到列表展示,在列表展示时,会要求标题行不动,其余数据行滚动情况.如果有框架,那么使用框架是最简单的. 那么不使用框架时,怎么办呢?那就是抄框架的底层实现. 如果不想抄框架,那就自己去实现,我暂时有三种实现思路 1.不使用table,而是用div画表单,这样的话,我们只需要将标题行所在的div固定不动就行了 2.单个table,这个时候,可以通过js加css,来使得首行不动,只有数据行滚动 3.使用三个div,两个table来实现,我今天主要讲的也是这种实现方式 实现思路: 三个div,
html中table固定头部表格tbody可上下左右滑动
01-19
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： <div class=table_box_big> <div class=table_box> ... <th><div>标题标题标题标题标题标题标题标题标题四
jquery无缝向上滚动实现代码
10-27
这种效果常用于新闻滚动条、广告轮播或者网站导航栏等场景，以展示多条信息而无需用户手动翻阅。 描述中提到的“无缝间歇向上滚动”，意味着这个滚动效果不仅连续无断点，而且是定时自动进行的，每隔一段时间（在...
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6437
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
table自定义滚动条样式
qq_44162778的博客
06-09 1195
table 通过css自定义滚动条样式
html标题位置怎么设置,在html中的位置固定标题
weixin_39942995的博客
06-23 1785
我有一个固定位置的标题(动态高度)。在html中的位置固定标题我需要将容器div放在标题下方。由于标题高度是动态的，因此我无法使用顶部边距的固定值。这怎么办？这里是我的CSS：#header-wrap {position: fixed;height: auto;width: 100%;z-index: 100}#container{/*Need to write css to start this...
Element-ui中 表格 (Table)组件中滚动条样式修改
明天也要努力的博客
05-18 5987
1. 修改单个滚动条样式 在对应组件的样式中使用穿透 <style lang="scss" scoped> .el-table { /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 10px; /*滚动条宽度*/ height: 10px; /*滚动条高度*/ } /*定义滚动条轨道 内阴影+圆角*/ /deep/ .el-table__body-wrapper::-webkit-scrollbar-
css 滚动条样式和table
Jana Jing的分享
12-18 799
1.滚动条美化 ::-webkit-scrollbar {} //滚动条整体部分 ::-webkit-scrollbar-track{} //滚动条滑轨 ::-webkit-scrollbar-track-piece{} //内层轨道，滚动条中间部分 ::-webkit-scrollbar-thumb {} //滚动条滑块 ::-webkit-scrollbar-button{} //滑轨两头的监听按钮 ::-webkit-scrollbar-button:star.
使用html中的table实现内容滚动下拉表头固定不动的方法
徊忆羽菲
08-06 4978
使用html中的table实现内容滚动下拉表头固定不动的方法 序号内容 1 我只是用来测试的 2 我只是用来测试的 3 我只是用来测试的 4 我只是用来测试的 5 我只是用来测试的 6 我只是用来测试的 7 我只是用来测试的 8 我只是用来测试的 9 我只是用来测试的 10 我只是用来测试的 11 我只是用来测试的 12 我只是用来测试的 13 我只是用来测试的 14 我只是用来测试的 15 我只是用来测试的 ...
HTML中滚动条滚动时如何让上面的标题固定不动
Quincylk的专栏
10-20 3万+
在做web前端开发时，有时候需要滚动条滚动时让上面的标题固定不动。如果一开始在设计阶段html元素的层次结构是对的，通过在不同的节点设置overflow就很容易实现。 但是有时候一开始的层次结构设计的不能满足让标题固定不动，如果调整层次结构又会改动很多文件。例如一开始，标题并没有单独放在一个div里，而是按左右设计的，并且是在2个不同的模板文件里。这时要实现上述需求，在不改动大的层次结构
HTML网页中如何实现内容不随滚动条移动
路虽远，行则必至！
06-29 8915
div的样式中使用相当于浏览器窗口定位——position:fixed 一、position:fixed属性的含义 fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 我们平时所说的固定定位指的就是 fixed，设置了固定定位的元素不会随滚动条上下滚动。 二、一般的 position:fi...
element table el-table 添加横向滚动条 宽度超出时横向滚动条不出现，固定表头完美方案
qq_28362477的博客
12-07 2万+
项目场景： 表格横向宽度超出后，滚动条没有出现 问题描述： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201207113326985.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4MzYyNDc3,size_16,color_FFFFFF,t_70) 原因分析： 查了一下网上其他的解
element UI中怎么把el-table的滚动条放在合计栏
最新发布
09-19
在Element UI中，如果你想将`el-table`的滚动条放置在表的底部，尤其是当需要在总计行（通常包含合计的列）区域滚动时，可以使用一些CSS技巧。默认情况下，Element UI的表格滚动条会跟随内容滚动。但是，如果你想要...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值