表格固定第一行，且增加横向与竖向滚动条

最新推荐文章于 2023-02-27 18:00:12 发布
最新推荐文章于 2023-02-27 18:00:12 发布
阅读量575 收藏 1
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/my_whale/article/details/106257147
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>表格固定第一行，且增加横向与竖向滚动条</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .th{
            width: 120px !important;
            text-align: center;
        }
        .container{
            overflow-x: auto;
            width: 360px;
        }
     </style>
</head>

<body>

<div class="container">
    <!--此处722px，是由于border有1px，加上两边的总共有722px，这样保证内容720px，才能使两个表格对齐-->
    <table style="width: 722px;" border="1" cellspacing="0" cellpadding="0">
        <thead>
        <tr>
            <th class="th">序号</th>
            <th class="th">姓名</th>
            <th class="th">性别</th>
            <th class="th">住址</th>
            <th class="th">电话</th>
            <th class="th">.......</th>
        </tr>
        </thead>
    </table>
    <div style="width: 722px;overflow-y: auto;height: 200px !important;overflow-x: hidden;">
        <table style="width: 722px;" border="1" cellspacing="0" cellpadding="0">
            <tbody>
            <tr>
                <td class="th">1</td>
                <td class="th">张三</td>
                <td class="th">男</td>
                <td class="th">江苏省南京市浦口区</td>
                <td class="th">13852478951</td>
                <td class="th">...........</td>
            </tr>
            <tr>
                <td class="th">2</td>
                <td class="th">张三</td>
                <td class="th">男</td>
                <td class="th">江苏省南京市浦口区</td>
                <td class="th">13852478951</td>
                <td class="th">...........</td>
            </tr>
            <tr>
                <td class="th">3</td>
                <td class="th">张三</td>
                <td class="th">男</td>
                <td class="th">江苏省南京市浦口区</td>
                <td class="th">13852478951</td>
                <td class="th">...........</td>
            </tr>
            <tr>
                <td class="th">4</td>
                <td class="th">张三</td>
                <td class="th">男</td>
                <td class="th">江苏省南京市浦口区</td>
                <td class="th">13852478951</td>
                <td class="th">...........</td>
            </tr>
            <tr>
                <td class="th">5</td>
                <td class="th">张三</td>
                <td class="th">男</td>
                <td class="th">江苏省南京市浦口区</td>
                <td class="th">13852478951</td>
                <td class="th">...........</td>
            </tr>
            <tr>
                <td class="th">6</td>
                <td class="th">张三</td>
                <td class="th">男</td>
                <td class="th">江苏省南京市浦口区</td>
                <td class="th">13852478951</td>
                <td class="th">...........</td>
            </tr>
            <tr>
                <td class="th">7</td>
                <td class="th">张三</td>
                <td class="th">男</td>
                <td class="th">江苏省南京市浦口区</td>
                <td class="th">13852478951</td>
                <td class="th">...........</td>
            </tr>
            <tr>
                <td class="th">8</td>
                <td class="th">张三</td>
                <td class="th">男</td>
                <td class="th">江苏省南京市浦口区</td>
                <td class="th">13852478951</td>
                <td class="th">...........</td>
            </tr>
            <tr>
                <td class="th">9</td>
                <td class="th">张三</td>
                <td class="th">男</td>
                <td class="th">江苏省南京市浦口区</td>
                <td class="th">13852478951</td>
                <td class="th">...........</td>
            </tr>
            <tr>
                <td class="th">10</td>
                <td class="th">张三</td>
                <td class="th">男</td>
                <td class="th">江苏省南京市浦口区</td>
                <td class="th">13852478951</td>
                <td class="th">...........</td>
            </tr>
            <tr>
                <td class="th">11</td>
                <td class="th">张三</td>
                <td class="th">男</td>
                <td class="th">江苏省南京市浦口区</td>
                <td class="th">13852478951</td>
                <td class="th">...........</td>
            </tr>
            <tr>
                <td class="th">12</td>
                <td class="th">张三</td>
                <td class="th">男</td>
                <td class="th">江苏省南京市浦口区</td>
                <td class="th">13852478951</td>
                <td class="th">...........</td>
            </tr>
            <tr>
                <td class="th">13</td>
                <td class="th">张三</td>
                <td class="th">男</td>
                <td class="th">江苏省南京市浦口区</td>
                <td class="th">13852478951</td>
                <td class="th">...........</td>
            </tr>
            <tr>
                <td class="th">14</td>
                <td class="th">张三</td>
                <td class="th">男</td>
                <td class="th">江苏省南京市浦口区</td>
                <td class="th">13852478951</td>
                <td class="th">...........</td>
            </tr>
            <tr>
                <td class="th">15</td>
                <td class="th">张三</td>
                <td class="th">男</td>
                <td class="th">江苏省南京市浦口区</td>
                <td class="th">13852478951</td>
                <td class="th">...........</td>
            </tr>
            <tr>
                <td class="th">16</td>
                <td class="th">张三</td>
                <td class="th">男</td>
                <td class="th">江苏省南京市浦口区</td>
                <td class="th">13852478951</td>
                <td class="th">...........</td>
            </tr>
            <tr>
                <td class="th">17</td>
                <td class="th">张三</td>
                <td class="th">男</td>
                <td class="th">江苏省南京市浦口区</td>
                <td class="th">13852478951</td>
                <td class="th">...........</td>
            </tr>
            <tr>
                <td class="th">18</td>
                <td class="th">张三</td>
                <td class="th">男</td>
                <td class="th">江苏省南京市浦口区</td>
                <td class="th">13852478951</td>
                <td class="th">...........</td>
            </tr>
            </tbody>
        </table>
    </div>

</div>

</body>

</html>

 

预览效果

my_whale
关注
layui静态表格设置滚动条_layui table表格 表头与内容列错位问题（只有纵向滚动条的情况） -...
weixin_39548968的博客
12-18 1951
thinkphp开发的一个项目，登录成功后又跳转到登录页面，在提交信息后输出session都是正常的，没有问题，但是页面跳转后，session出现丢失现象，无法正常完成登陆。通过查找资料，发现原来是bom头的原因。受COOKIE送出机制...版本2.4.5问题展示：存在问题：正好错位一个纵向滚动条的宽度思路：仔细观察th元素及th包裹的子元素div 如下图发现th宽度莫名的就多了5px 我就纳闷...
固定Table第一行或某几行不随滚动条滚动而滚动
01-19
样式： 复制代码代码如下: .fixedHead { position: relative; top:[removed]this.offsetParent.scrollTop-2); } 使用： 复制代码代码如下: <div> <table class=”con_tbl”>         <tr class=”fixedHead”>         <th>标题不动</th> </tr> <PRE class=html name=”code”>        <t
固定表头带滚动条的HTML表格
踏歌行的专栏
07-25 685
转载地址：http://blog.csdn.net/daryl715/article/details/1883677                                     商场本月销售统计表                                     商品名              上旬
表头固定的前提下表格添加纵向滚动条
weixin_30379973的博客
04-01 197
　　有时候在不分页且数据多的时候就需要滚动条，或者说是下拉加载的时候也需要滚动条，但是希望在滚动的时候数据的表头固定便于理解表体。 1. 第一种，在tbody元素上进行滚动 　　这种方式有个缺陷就是所有的单元格的宽度一样，平分整个tr的宽度，不会根绝内容自适应宽度。 如下: <!DOCTYPE html> <html> <head...
css实现div自动添加纵向滚动条
zunguitiancheng的专栏
11-03 1907
http://www.cnblogs.com/shunyao8210/archive/2011/01/13/1934216.html
VUE滚动区域固定横向表头、纵向第一列
weixin_45835850的博客
12-27 1180
VUE滚动区域固定横向表头、纵向第一列 DOM部分 <div ref="progress" class="progress"> <div ref="fixedTop" class="dateHead" :style="{ top: `${fixedTopVal}px` }"> <div class="dateHead-fixed"> <div class="dateHead-fixed-type" :style="{
android开发之横向滚动/竖向滚动的ListView(固定列头)
09-05
在Android开发中，有时我们需要创建一个既可横向滚动又可竖向滚动的表格，这通常涉及到自定义ListView和HorizontalScrollView的组合使用。以下是对这个特殊需求的详细解释和实现思路： 首先，我们用ListView来处理...
利用纯css实现table固定列与表头中间横向滚动的思路和实例
09-24
本篇文章主要探讨如何利用纯CSS实现table固定列与表头，同时在中间部分添加横向滚动条，以确保用户体验。 首先，我们面临的问题是表格内容因列数过多而产生换行，这影响了视觉效果。为了解决这个问题，可以使用CSS...
QT表格固定第一列，拖动时第一列不会遮挡
04-02
标题"QT表格固定第一列，拖动时第一列不会遮挡"指向了一个特定的需求：在表格中固定第一列，以便用户在滚动或拖动表格时，关键的列头信息始终可见。这个功能对于处理大量数据或多个列的表格尤其有用，因为它可以提高...
导航菜单固定头部跟随屏幕滚动jQuery插件posfixed
06-09
jQuery-Posfixed 能够让网页的导航或表头等固定在顶部或底部，让用户更方便的操作或查看信息，淘宝网、易迅网等电子商务网站常常用到这种效果。除了导航和表头，也可以固定 其他内容，比如广告、返回顶部等等，同时 Posfixed 也可以作为 IE6 不支持 fixed 的一个解决方案; 兼容 Posfixed 兼容以下浏览器： • Firefox 2+ • Internet Explorer 6+ • Safari 2+ • Opera 9+ • Chrome
Jquery实现图片列表横向和纵向不间断滚动插件实例源码
12-28
Jquery实现图片列表横向和纵向不间断滚动插件实例源码，供大家一起参考学习。
h5页面横向滚动条定位
weixin_45977260的博客
09-03 894
h5代码 //定位 function dingwei(weizhi){ var $objTr = $(weizhi); //找到要定位的地方 var objTr = $objTr[0]; //转化为dom对象 $(".fenleibie").animate({scrollLeft:objTr.offsetLeft},"slow"); //左定位 ,上定位为scrollTop } //页面加载之后定位到想要的di...
75.为元素添加横向滚动条及隐藏纵向滚动条
银河与猫的博客
12-22 636
铭记：需要设置父元素宽度为100%，然后各个子元素宽度加起来要超过父元素的宽度，不然不会显示滚动条 <div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> ul{ width:100%; // 此时宽度若为1000px overflow-x:sc
Table样式
yuzheh521的博客
11-11 254
<style type="text/css"> table { border-collapse: collapse; margin: 0 auto; text-align: center; } table td, table th { border: 1px solid #cad9ea; colo.
如何固定滚动条在视窗底部？
weixin_42401447的博客
09-16 1912
在使用elementui表格组件时，会遇到一个问题，表格过大而无法显示完全，要把横向内容看完整就需要滚动到列表底部拉动横向滚动条，十分不方便。 因此，我想自定义滚动条显示在视窗底部： <!--自定义滚动条--> <div class="out-box" ref="out-box"> <img style="margin-left:-20px;position:fixed;bottom:0px;" src="http://img.s.you...
关于固定定位position: fixed；和横向滚动overflow-x: scroll；无法同时使用的问题
最新发布
qq_44161722的博客
02-27 1667
在做项目时遇到一个功能是要把某个盒子固定在底部，并且是要横向滑动的，发现position: fixed;和overflow-x: scroll;同时使用无效，现记录一下解决方法。
CSS - 实现横向滚动（横向滚动布局）
热门推荐
王佳斌
08-24 3万+
CSS - 实现横向滚动（横向滚动布局），css横向滚动布局，css实现元素横向滚动的方法css中如何实现横向滚动布局，纯CSS实现横向滚动条，横向不间断滚动DIV CSS代码，纯CSS3横向滚动条实现。
为表格添加竖直滚动条并固定表头
小夜丶凝眸的博客
08-04 6708
添加滚动条： 将table放入一个div，给该div添加样式 style="overflow:auto;" 固定表头：  给里的添加 style=" position:fixed;top:XXpx; z-index:2;"  style里面的top属性可以调整该表头距离浏览器顶端的距离来将它的位置固定，根据自己页面的效果进行调整(有些浏览器可以自动调整其位置)  z-index:
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值