<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实现表头固定内容滚动表格相关推荐

  1. html <table> 表格 表头固定 内容滚动 代码拿去就能用

    纯 html.css代码写的 table 表格 先来看下pc端的效果图 移动端的效果图,前面两张是静态图,第三张是gif动态图 (像素失真了 •︿• ) 公司的移动端项目,用的是react,页面需求是 ...

  2. java 表头固定_BootStrap的table表头固定tbody滚动的实例代码

    关于bootstrap table其他知识不多说,直接给大家贴代码了. 关键代码如下所示: 栏目一栏目二栏目三栏目一栏目二栏目三 星期一星期二星期三星期一星期二星期三星期一星期二 星期二 星期三星期一 ...

  3. html网页表头下拉,html css将表头固定的最直接的方法

    position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时必须解决两个问题.第一:表体将随之 ...

  4. table表格固定表头,内容滚动显示

    目的:做一个table表格,实现固定标题行而内容可滚动 html部分代码如下: <!DOCTYPE html> <html><head><meta chars ...

  5. html表头跟随滚动,table的表头固定--上下滚动表头固定,左右滚动跟随滚动

    遇到这种固定表格的,我们一般都是写两个table,一个放thead,一个放tbody: 如果表格内容少,我们只需要给两个table100%宽度就行,如果遇到表格内容很长的就比较棘手了: 1.上面的ta ...

  6. css 滚动公告,用DIV+CSS布局,怎么做滚动的公告栏?

    html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD ...

  7. 使用JS实现表格宽度任意竖轴滚动时表头固定

    前言: 在实际项目开发中遇到类似需求,本来想当然地用table-layout ,但是这个属性并不能很好的应用在任意宽度的表格上.至于其他解决方案就是给td手动设置固定宽度,这种方法并不具有通用性,但是 ...

  8. table表头固定只让内容滚动

    纯css实现表头固定,只tbody滚动 需要用到粘性固定属性 – position:sticky position:sticky 用法:默认情况下,其表现为relative,在视窗与设置了该属性的元素 ...

  9. HTML+CSS第十课:常见的3种网页布局方式:表格布局、DIV+CSS布局、框架布局

    知识点:网页布局的方式 1.网页布局 常见的页面布局方式:表格布局.DIV+CSS布局.框架布局. 表格布局:用来显示较多的数据,如OA系统.ERP系统或CRM系统.(一般用在局部) DIV+CSS布 ...

最新文章

  1. Imagination 推新款GPU IP,首次实现桌面级光线追踪效果
  2. dataconnectiondialog mysql_MySQL的DataConnectionDialog
  3. 【C 语言】文件操作 ( 文件加密解密 | 使用第三方 DES 加密解密库 | 头文件导入 | 兼容 C++ 语言 | 加密解密函数说明 )
  4. c++ 数组 结构体
  5. 2015年第六届蓝桥杯 - 省赛 - C/C++大学C组 - B. 立方尾不变
  6. jmeter持续时间循环控制器_不写代码实现条件循环?只用Jmeter就能实现
  7. MySQL--pt-osc工具学习
  8. 财务模块的一些基础概念
  9. 「面试必背」Linux面试题(2022最新版)
  10. spring中cglib动态代理
  11. Python图像处理笔记——形态学处理(skimage.morphology)
  12. 【微信小程序】选择器组件picker
  13. 2019 MySQL 8 安全安装避坑指南
  14. android studio编译app,Android Studio编译项目报错
  15. [唐诗]古风(其一)-李白
  16. 到底什么是范数?什么是0范数、1范数、2范数?区别又是什么?
  17. Redis-AKF/CAP原则
  18. 基于VLC的本地视频播放器
  19. linux中权限管理命令chmod
  20. HDLbits笔记-移位寄存器

热门文章

  1. python软件包自带的集成开发环境-Python的10大集成开发环境和代码编辑器(指南)...
  2. python自学网站 知乎-知乎千赞回答 | 为什么自学python看不进去?
  3. python下载安装教程3.8.0-Python3.8下载
  4. python里面temp是啥-请问Python里temp是什么意思?
  5. 20行python代码的入门级小游戏-200行Python代码实现的2048小游戏
  6. python导入txt文件并绘图-Python实现读取txt文件中的数据并绘制出图形操作示例
  7. 自学网python教程视频-Python爬虫之Django视频教程
  8. arcgis python编程案例-ArcGIS Python编程案例-电子资料链接
  9. python哪一版好用-Python最好用的编辑器是哪款?北京老男孩教育
  10. python免费入门手册-Python 基础入门教程