div+css实现表头固定内容滚动表格
<div class="m-demo"><table><thead><tr><th>定宽a</th><th>定宽b</th><th>定宽c</th><th>最后列不定宽d</th></tr></thead></table><div class="scroll"><table><tbody><tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr><tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr><tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr><tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr><tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr><tr><td>定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr></tbody></table></div> </div>
/* 预览辅助样式 */ body{margin:20px;} html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} table{border-collapse:collapse;border-spacing:0;} /* 表头固定内容滚动的表格 */ .m-demo{margin:0 0 20px;line-height:18px;} .m-demo .scroll{max-height:116px;border:1px solid #ddd;border-top:0;overflow-y:auto;} .m-demo table{width:100%;table-layout:fixed;} .m-demo th,.m-demo td{width:100px;padding:10px;border:1px solid #ddd;} .m-demo th{font-weight:bold;background:#eee;} .m-demo thead th:last-child,.m-demo tbody td:last-child{width:auto;} .m-demo tbody tr:nth-child(2n){background:#fafafa;} .m-demo tbody tr:first-child td{border-top:0;} .m-demo tbody tr:last-child td{border-bottom:0;} .m-demo tbody tr td:first-child{border-left:0;} .m-demo tbody tr td:last-child{border-right:0;}
转载于:https://www.cnblogs.com/GoCircle/p/8426369.html
div+css实现表头固定内容滚动表格相关推荐
- html <table> 表格 表头固定 内容滚动 代码拿去就能用
纯 html.css代码写的 table 表格 先来看下pc端的效果图 移动端的效果图,前面两张是静态图,第三张是gif动态图 (像素失真了 •︿• ) 公司的移动端项目,用的是react,页面需求是 ...
- java 表头固定_BootStrap的table表头固定tbody滚动的实例代码
关于bootstrap table其他知识不多说,直接给大家贴代码了. 关键代码如下所示: 栏目一栏目二栏目三栏目一栏目二栏目三 星期一星期二星期三星期一星期二星期三星期一星期二 星期二 星期三星期一 ...
- html网页表头下拉,html css将表头固定的最直接的方法
position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时必须解决两个问题.第一:表体将随之 ...
- table表格固定表头,内容滚动显示
目的:做一个table表格,实现固定标题行而内容可滚动 html部分代码如下: <!DOCTYPE html> <html><head><meta chars ...
- html表头跟随滚动,table的表头固定--上下滚动表头固定,左右滚动跟随滚动
遇到这种固定表格的,我们一般都是写两个table,一个放thead,一个放tbody: 如果表格内容少,我们只需要给两个table100%宽度就行,如果遇到表格内容很长的就比较棘手了: 1.上面的ta ...
- css 滚动公告,用DIV+CSS布局,怎么做滚动的公告栏?
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD ...
- 使用JS实现表格宽度任意竖轴滚动时表头固定
前言: 在实际项目开发中遇到类似需求,本来想当然地用table-layout ,但是这个属性并不能很好的应用在任意宽度的表格上.至于其他解决方案就是给td手动设置固定宽度,这种方法并不具有通用性,但是 ...
- table表头固定只让内容滚动
纯css实现表头固定,只tbody滚动 需要用到粘性固定属性 – position:sticky position:sticky 用法:默认情况下,其表现为relative,在视窗与设置了该属性的元素 ...
- HTML+CSS第十课:常见的3种网页布局方式:表格布局、DIV+CSS布局、框架布局
知识点:网页布局的方式 1.网页布局 常见的页面布局方式:表格布局.DIV+CSS布局.框架布局. 表格布局:用来显示较多的数据,如OA系统.ERP系统或CRM系统.(一般用在局部) DIV+CSS布 ...
最新文章
- Imagination 推新款GPU IP,首次实现桌面级光线追踪效果
- dataconnectiondialog mysql_MySQL的DataConnectionDialog
- 【C 语言】文件操作 ( 文件加密解密 | 使用第三方 DES 加密解密库 | 头文件导入 | 兼容 C++ 语言 | 加密解密函数说明 )
- c++ 数组 结构体
- 2015年第六届蓝桥杯 - 省赛 - C/C++大学C组 - B. 立方尾不变
- jmeter持续时间循环控制器_不写代码实现条件循环?只用Jmeter就能实现
- MySQL--pt-osc工具学习
- 财务模块的一些基础概念
- 「面试必背」Linux面试题(2022最新版)
- spring中cglib动态代理
- Python图像处理笔记——形态学处理(skimage.morphology)
- 【微信小程序】选择器组件picker
- 2019 MySQL 8 安全安装避坑指南
- android studio编译app,Android Studio编译项目报错
- [唐诗]古风(其一)-李白
- 到底什么是范数?什么是0范数、1范数、2范数?区别又是什么?
- Redis-AKF/CAP原则
- 基于VLC的本地视频播放器
- linux中权限管理命令chmod
- HDLbits笔记-移位寄存器
热门文章
- python软件包自带的集成开发环境-Python的10大集成开发环境和代码编辑器(指南)...
- python自学网站 知乎-知乎千赞回答 | 为什么自学python看不进去?
- python下载安装教程3.8.0-Python3.8下载
- python里面temp是啥-请问Python里temp是什么意思?
- 20行python代码的入门级小游戏-200行Python代码实现的2048小游戏
- python导入txt文件并绘图-Python实现读取txt文件中的数据并绘制出图形操作示例
- 自学网python教程视频-Python爬虫之Django视频教程
- arcgis python编程案例-ArcGIS Python编程案例-电子资料链接
- python哪一版好用-Python最好用的编辑器是哪款?北京老男孩教育
- python免费入门手册-Python 基础入门教程