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框架哦！！！