css 固定列头,表格头部固定和表格列固定

我不是前端大神，只是偶尔在开发系统时，需要用到表格。如果表格只需要单独的用来展现数据，那就很简单了，那如果需要实现复杂的样式呢？比如说表头固定，当网页滚动的时候，表头自动固定到网页顶部，这样很客观的展现了每列的内容。

表头固定和列固定，需要用到jQuery DataTables(我不是前端大神，就懒一点，用下框架，偶尔用下框架，开发时间也节省了嘛，嘿嘿 ^_^)，没错，又是我前面介绍的DataTables，我对这框架是情有独钟啊，我觉得是万能是表格插件，从简单到复杂，从客户端到服务器，从数据到Excel导入，平时我们基本上会用到的，它都能实现，并且不需要你些繁琐的javascript和后端代码，它都轻松搞定。

表头固定和列固定是jQuery DataTables里的两个独立的扩展插件，下面我们就分别说说：

表头固定

1.下载并引入js和css样式扩展

dataTables.fixedHeader.min.js

fixedHeader.dataTables.min.css

2.javascript

$(document).ready(function() {

$('#example').DataTable( {

fixedHeader: true

} );

表列固定

1.下载并引入js和css样式扩展

dataTables.fixedColumns.min.js

fixedColumns.dataTables.min.css

2.javascript

$(document).ready(function() {

var table = $('#example').DataTable( {

scrollY: "300px",//表格高度，可实现Y轴滚动

scrollX: true,//表格X轴滚动

scrollCollapse: true,

fixedColumns: {

leftColumns: 1,//表格左边固定列数

rightColumns: 1//表格右边固定列数

}

} );

大功告成，是不是特别简单啊？但是有一点要记住，引入这些扩展之前，比如先引入DataTables框架哦！！！

css 固定列头,表格头部固定和表格列固定相关推荐

WPF 用 DataTemplate 合并DataGrid列表列头类似报表设计及行头列头样式 - 学习
WPF中 DataGrid 列头合并,类似于报表设计.效果图如下↓ 1.新建一个WPF项目WpfApplication1,新建一个窗体DataGridTest,前台代码如下: <Window x ...
数据中心小母线与列头柜供配电系统的综合比较
数据中心小母线系统是数据中心末端母线供配电系统的俗称.数据中心小母线只是相对于变电站低压出线母线或传统大型建筑物中主干低压母线单条母线容量较小而已.文中介绍了小母线系统与列头柜形式供配电系统的技术性能 ...
安科瑞配电列头柜产品XXX数据中心案例分享
安科瑞耿敏花 [摘要]介绍了安科瑞配电列头柜在某大型数据中心的应用情况,展示了安科瑞配电列头柜在数据中心机房末端配电的应用可能性. [关键词]数据中心:智能监控系统:列头柜:多回路监控: ...
Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定
在Vue中CSS样式来设计Table横向竖向滚动自定义个别列表头固定前言一.表格数据二.样式设计 1.表格与外层DIV样式 2.固定表头的样式(重要) 总结前言大家一定使用过很多UI,UI都 ...
html表格table表头和首列固定
HTML的表格比安卓的表格简单很多,更适合做一些复杂的表格,下面是一种能将表格首列与表头固定,表格内容可滑动的表格,分享给大家. 主要 css 代码在 style 标签下,还有就是表格外层的div也设 ...
html5 表格向下,html中table固定头部表格tbody可上下左右滑动代码实例
本篇文章小编给大家分享一下html中table固定头部表格tbody可上下左右滑动代码实例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 当表格头部固 ...
elementui固定表格头部
elementui固定表格头部 el-table的高度超出页面,头部固定,下面滚动,设置height="calc('100% - 48px')" <template>& ...
EXCEL表格怎么让每一列都乘以固定的一列
目标:将表中的每一列都乘以最后一列,例如上图,将U-Y中的每一列乘以AC列. 第一步:复制AC列第二步:选择U-Y中的每一列,右击选择性粘贴,打开选择性粘贴对话框,选择运算中的乘即可,如图二.
antd 设置表头属性_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
一.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...
antd table动态表头_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
1.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本以前都存在,反正3.16.2版本是存在这个问题的,若是是3.24.0以前的版本估计只能经过修改css样式解决.css 按照官网说的 ...

css 固定列头,表格头部固定和表格列固定

css 固定列头,表格头部固定和表格列固定相关推荐

最新文章

热门文章