完美兼容IE_Opera_Firefox等主流浏览器的锁定表格的 表头以及表头列

最新推荐文章于 2018-11-13 10:55:00 发布
最新推荐文章于 2018-11-13 10:55:00 发布
阅读量8.4k 收藏 3
点赞数 13
分类专栏： JQUERY 文章标签： 浏览器 firefox opera ie 能源 2010
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songyanjun2011/article/details/7369747
版权

锁定 表格的表头 和 列   终于 被我 写出来了，哇哈哈~~~~~~  ， 心情大好....   共享下 吧。  

希望 看到的该文的 时候给予评价， 俗话说 吃水不忘挖井人啊。 

要是朋友你 通过该文中的共享代码 测试成功了，记得 帮兄弟我 把 该文  帮忙顶起！！！！


转载请标明出自：http://blog.csdn.net/SongYanJun2011


考虑到 当 我们从数据库中 查出 某一张 表的所有数据 ， 当这张  表中的 字段 非常 非常的 多， 我们  要想 全部给用户展示 ，在 浏览器的  页面展示窗口 中你会发现有相当 长的 一个 表格， 如果 表格的 css 处理的不好的话 ， 会其实 数据把 表格 撑 的变形，  这是我们 最不想看到的 也 最不愿意接收的。


解决的最佳 方案 就是 将 表 设置 到 一个 所应该 有的 宽度， 并且 在这个Table 中做  锁定 表头行 和 表头列   的 处理，  虽让网上 很多 类似的 文章， 但是 如果说做到 每种浏览器之间 的兼容 的文章 却很少 ，可以说是 少之又少。


上一阵子我在博文中  写了一个   冻结 表头行  和 表头 列 的   博文， 但是  却 只能   兼容  IE 核心浏览器下，  今天终于 把  这个兼容到了 所有的主流 浏览器 IE9 、Firefox、Opera 已经测试通过。


兴奋，无比兴奋。


因为正在 做项目， 有保密协议的，我就不共享源文件 了， 以下是我从我的  JSP 文件中  摘下来的。

绝对的可以 完美的解决浏览器间的 兼容问题。


步骤1：创建一个表格 ， 比如 说 你的这张表  字段列 很多很多，  如下面的代码所示。

<table style="border-bottom-color: black; 
    	      border-top-color: black; 
              width: 2048px; 
              color: #000000; 
              border-right-color: black; 
              font-size: medium; 
              border-left-color: black" 
    id="MyTable"
    border="1"
    cellspacing="0"
    cellpadding="0" 
    >
    
        <thead>
        <tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold; padding: 0px 0px 0px 0px;">
                <th>序号</th>
                <th>机组编号</th>
                <th>机组名称</th>
                <th>铭牌容量</th>
                <th>管理单位</th>
                <th>控股单位</th>
                <th>控股比例</th>
                <th>调度单位</th>
                
                <th>所属电网</th>
                <th>投运时间</th>
                <th>统计时间</th>
                <th>停统时间</th>
                <th>齿轮箱厂家</th>
                <th>叶片厂家</th>
                <th>发电机厂家</th>
                <th>控制系统厂家</th>
                <th>进口/国产标志</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>10</td>
                <td>13424046</td>
                <td>官厅风电046号机组</td>
                <td>1.50000</td>
                <td>北京能源投资（集团）</td>
                <td>北京能源投资（集团）</td>
                <td>51%</td>
                <td>调度单位 哦也</td>
                <td>华北电网</td>
                <td>2010.01.01 08:00</td>
                <td>2010.02.01 08:00</td>
                <td>2010.03.01 08:00</td>
                <td>北京鼓风机厂</td>
                <td>北京巴布克尔有限公司</td>
                <td>华北电力设备成套公司</td>
                <td>龙源电力集团公司</td>
                <td>0000</td>
            </tr>
            <tr>
                <td>10</td>
                <td>13424046</td>
                <td>官厅风电046号机组</td>
                <td>1.50000</td>
                <td>北京能源投资（集团）</td>
                <td>北京能源投资（集团）</td>
                <td>51%</td>
                <td>调度单位 哦也</td>
                <td>华北电网</td>
                <td>2010.01.01 08:00</td>
                <td>2010.02.01 08:00</td>
                <td>2010.03.01 08:00</td>
                <td>北京鼓风机厂</td>
                <td>北京巴布克尔有限公司</td>
                <td>华北电力设备成套公司</td>
                <td>龙源电力集团公司</td>
                <td>0000</td>
            </tr>
            <tr>
                <td>10</td>
                <td>13424046</td>
                <td>官厅风电046号机组</td>
                <td>1.50000</td>
                <td>北京能源投资（集团）</td>
                <td>北京能源投资（集团）</td>
                <td>51%</td>
                <td>调度单位 哦也</td>
                <td>华北电网</td>
                <td>2010.01.01 08:00</td>
                <td>2010.02.01 08:00</td>
                <td>2010.03.01 08:00</td>
                <td>北京鼓风机厂</td>
                <td>北京巴布克尔有限公司</td>
                <td>华北电力设备成套公司</td>
                <td>龙源电力集团公司</td>
                <td>0000</td>
            </tr>
            <tr>
                <td>10</td>
                <td>13424046</td>
                <td>官厅风电046号机组</td>
                <td>1.50000</td>
                <td>北京能源投资（集团）</td>
                <td>北京能源投资（集团）</td>
                <td>51%</td>
                <td>调度单位 哦也</td>
                <td>华北电网</td>
                <td>2010.01.01 08:00</td>
                <td>2010.02.01 08:00</td>
                <td>2010.03.01 08:00</td>
                <td>北京鼓风机厂</td>
                <td>北京巴布克尔有限公司</td>
                <td>华北电力设备成套公司</td>
                <td>龙源电力集团公司</td>
                <td>0000</td>
            </tr>
            <tr>
                <td>10</td>
                <td>13424046</td>
                <td>官厅风电046号机组</td>
                <td>1.50000</td>
                <td>北京能源投资（集团）</td>
                <td>北京能源投资（集团）</td>
                <td>51%</td>
                <td>调度单位 哦也</td>
                <td>华北电网</td>
                <td>2010.01.01 08:00</td>
                <td>2010.02.01 08:00</td>
                <td>2010.03.01 08:00</td>
                <td>北京鼓风机厂</td>
                <td>北京巴布克尔有限公司</td>
                <td>华北电力设备成套公司</td>
                <td>龙源电力集团公司</td>
                <td>0000</td>
            </tr>
            <tr>
                <td>10</td>
                <td>13424046</td>
                <td>官厅风电046号机组</td>
                <td>1.50000</td>
                <td>北京能源投资（集团）</td>
                <td>北京能源投资（集团）</td>
                <td>51%</td>
                <td>调度单位 哦也</td>
                <td>华北电网</td>
                <td>2010.01.01 08:00</td>
                <td>2010.02.01 08:00</td>
                <td>2010.03.01 08:00</td>
                <td>北京鼓风机厂</td>
                <td>北京巴布克尔有限公司</td>
                <td>华北电力设备成套公司</td>
                <td>龙源电力集团公司</td>
                <td>0000</td>
            </tr>
            <tr>
                <td>10</td>
                <td>13424046</td>
                <td>官厅风电046号机组</td>
                <td>1.50000</td>
                <td>北京能源投资（集团）</td>
                <td>北京能源投资（集团）</td>
                <td>51%</td>
                <td>调度单位 哦也</td>
                <td>华北电网</td>
                <td>2010.01.01 08:00</td>
                <td>2010.02.01 08:00</td>
                <td>2010.03.01 08:00</td>
                <td>北京鼓风机厂</td>
                <td>北京巴布克尔有限公司</td>
                <td>华北电力设备成套公司</td>
                <td>龙源电力集团公司</td>
                <td>0000</td>
            </tr>
            <tr>
                <td>10</td>
                <td>13424046</td>
                <td>官厅风电046号机组</td>
                <td>1.50000</td>
                <td>北京能源投资（集团）</td>
                <td>北京能源投资（集团）</td>
                <td>51%</td>
                <td>调度单位 哦也</td>
                <td>华北电网</td>
                <td>2010.01.01 08:00</td>
                <td>2010.02.01 08:00</td>
                <td>2010.03.01 08:00</td>
                <td>北京鼓风机厂</td>
                <td>北京巴布克尔有限公司</td>
                <td>华北电力设备成套公司</td>
                <td>龙源电力集团公司</td>
                <td>0000</td>
            </tr>
            <tr>
                <td>10</td>
                <td>13424046</td>
                <td>官厅风电046号机组</td>
                <td>1.50000</td>
                <td>北京能源投资（集团）</td>
                <td>北京能源投资（集团）</td>
                <td>51%</td>
                <td>调度单位 哦也</td>
                <td>华北电网</td>
                <td>2010.01.01 08:00</td>
                <td>2010.02.01 08:00</td>
                <td>2010.03.01 08:00</td>
                <td>北京鼓风机厂</td>
                <td>北京巴布克尔有限公司</td>
                <td>华北电力设备成套公司</td>
                <td>龙源电力集团公司</td>
                <td>0000</td>
            </tr>
            <tr>
                <td>10</td>
                <td>13424046</td>
                <td>官厅风电046号机组</td>
                <td>1.50000</td>
                <td>北京能源投资（集团）</td>
                <td>北京能源投资（集团）</td>
                <td>51%</td>
                <td>调度单位 哦也</td>
                <td>华北电网</td>
                <td>2010.01.01 08:00</td>
                <td>2010.02.01 08:00</td>
                <td>2010.03.01 08:00</td>
                <td>北京鼓风机厂</td>
                <td>北京巴布克尔有限公司</td>
                <td>华北电力设备成套公司</td>
                <td>龙源电力集团公司</td>
                <td>0000</td>
            </tr>
            <tr>
                <td>10</td>
                <td>13424046</td>
                <td>官厅风电046号机组</td>
                <td>1.50000</td>
                <td>北京能源投资（集团）</td>
                <td>北京能源投资（集团）</td>
                <td>51%</td>
                <td>调度单位 哦也</td>
                <td>华北电网</td>
                <td>2010.01.01 08:00</td>
                <td>2010.02.01 08:00</td>
                <td>2010.03.01 08:00</td>
                <td>北京鼓风机厂</td>
                <td>北京巴布克尔有限公司</td>
                <td>华北电力设备成套公司</td>
                <td>龙源电力集团公司</td>
                <td>0000</td>
            </tr>
            <tr>
                <td>10</td>
                <td>13424046</td>
                <td>官厅风电046号机组</td>
                <td>1.50000</td>
                <td>北京能源投资（集团）</td>
                <td>北京能源投资（集团）</td>
                <td>51%</td>
                <td>调度单位 哦也</td>
                <td>华北电网</td>
                <td>2010.01.01 08:00</td>
                <td>2010.02.01 08:00</td>
                <td>2010.03.01 08:00</td>
                <td>北京鼓风机厂</td>
                <td>北京巴布克尔有限公司</td>
                <td>华北电力设备成套公司</td>
                <td>龙源电力集团公司</td>
                <td>0000</td>
            </tr>
            <tr>
                <td>10</td>
                <td>13424046</td>
                <td>官厅风电046号机组</td>
                <td>1.50000</td>
                <td>北京能源投资（集团）</td>
                <td>北京能源投资（集团）</td>
                <td>51%</td>
                <td>调度单位 哦也</td>
                <td>华北电网</td>
                <td>2010.01.01 08:00</td>
                <td>2010.02.01 08:00</td>
                <td>2010.03.01 08:00</td>
                <td>北京鼓风机厂</td>
                <td>北京巴布克尔有限公司</td>
                <td>华北电力设备成套公司</td>
                <td>龙源电力集团公司</td>
                <td>0000</td>
            </tr>
            <tr>
                <td>10</td>
                <td>13424046</td>
                <td>官厅风电046号机组</td>
                <td>1.50000</td>
                <td>北京能源投资（集团）</td>
                <td>北京能源投资（集团）</td>
                <td>51%</td>
                <td>调度单位 哦也</td>
                <td>华北电网</td>
                <td>2010.01.01 08:00</td>
                <td>2010.02.01 08:00</td>
                <td>2010.03.01 08:00</td>
                <td>北京鼓风机厂</td>
                <td>北京巴布克尔有限公司</td>
                <td>华北电力设备成套公司</td>
                <td>龙源电力集团公司</td>
                <td>0000</td>
            </tr>
            <tr>
                <td>10</td>
                <td>13424046</td>
                <td>官厅风电046号机组</td>
                <td>1.50000</td>
                <td>北京能源投资（集团）</td>
                <td>北京能源投资（集团）</td>
                <td>51%</td>
                <td>调度单位 哦也</td>
                <td>华北电网</td>
                <td>2010.01.01 08:00</td>
                <td>2010.02.01 08:00</td>
                <td>2010.03.01 08:00</td>
                <td>北京鼓风机厂</td>
                <td>北京巴布克尔有限公司</td>
                <td>华北电力设备成套公司</td>
                <td>龙源电力集团公司</td>
                <td>0000</td>
            </tr>
     </tbody>
    </table>


步骤2：创建一个 JS文件 ，命名为 clone_tableheader.js

// JavaScript Document
<!--
/*
@ JavaScript Clone table header
@ 作者：宋延军
@ 功能：冻结锁定 表格头 和 列
@ 日期：2012-03-19 下午13:17:41
@ 邮箱：songyanju_stars@126.com
@ QQ号：181744926

@ 页面加载调用：
	$(document).ready(function () {
            FixTable("MyTable", 2, 600, 400);
        });
*/

    function FixTable(TableID, FixColumnNumber, width, height) {
    /// <summary>
    ///     锁定表头和列
    ///     <para> http://blog.csdn.net/SongYanJun2011 </para>
    /// </summary>
    /// <param name="TableID" type="String">
    ///     要锁定的Table的ID
    /// </param>
    /// <param name="FixColumnNumber" type="Number">
    ///     要锁定列的个数
    /// </param>
    /// <param name="width" type="Number">
    ///     显示的宽度
    /// </param>
    /// <param name="height" type="Number">
    ///     显示的高度
    /// </param>
    if ($("#" + TableID + "_tableLayout").length != 0) {
        $("#" + TableID + "_tableLayout").before($("#" + TableID));
        $("#" + TableID + "_tableLayout").empty();
    }
    else {
        $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
    }
    $('<div id="' + TableID + '_tableFix"></div>'
    + '<div id="' + TableID + '_tableHead"></div>'
    + '<div id="' + TableID + '_tableColumn"></div>'
    + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
    var oldtable = $("#" + TableID);
    var tableFixClone = oldtable.clone(true);
    tableFixClone.attr("id", TableID + "_tableFixClone");
    $("#" + TableID + "_tableFix").append(tableFixClone);
    var tableHeadClone = oldtable.clone(true);
    tableHeadClone.attr("id", TableID + "_tableHeadClone");
    $("#" + TableID + "_tableHead").append(tableHeadClone);
    var tableColumnClone = oldtable.clone(true);
    tableColumnClone.attr("id", TableID + "_tableColumnClone");
    $("#" + TableID + "_tableColumn").append(tableColumnClone);
    $("#" + TableID + "_tableData").append(oldtable);
    $("#" + TableID + "_tableLayout table").each(function () {
        $(this).css("margin", "0");
    });
    var HeadHeight = $("#" + TableID + "_tableHead thead").height();
    HeadHeight += 2;
    $("#" + TableID + "_tableHead").css("height", HeadHeight);
    $("#" + TableID + "_tableFix").css("height", HeadHeight);
    var ColumnsWidth = 0;
    var ColumnsNumber = 0;
    $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
        ColumnsWidth += $(this).outerWidth(true);
        ColumnsNumber++;
    });
    ColumnsWidth += 2;
    if ($.browser.msie) {
        switch ($.browser.version) {
            case "7.0":
                if (ColumnsNumber >= 3) ColumnsWidth--;
                break;
            case "8.0":
                if (ColumnsNumber >= 2) ColumnsWidth--;
                break;
        }
    }
    $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
    $("#" + TableID + "_tableFix").css("width", ColumnsWidth);
    $("#" + TableID + "_tableData").scroll(function () {
        $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
        $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
    });
    $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
    $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
    $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
    $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
    if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
        $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
        $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
    }
    if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
        $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
        $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
    }
    $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
    $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
    $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
    $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
}

//-->


步骤3：页面调用  使用到了JQuery , 我用的是 jquery-1.6.1.min.js   ， 从官网 随便 下。 

官方网站：http://code.jquery.com/

<!-- Clone Table Header Start -->
		<script type="text/javascript" src="../../js/cloneTableHeader/jquery-1.6.1.min.js"></script>
		<script type="text/javascript" src="../../js/cloneTableHeader/clone_tableheader.js"></script>
		<script type="text/javascript">
		<!--
		
		//页面初始化 加载 JS函数	
		$(document).ready(cloneTableHeader_Width);
		
		//调整 浏览器 表格的显示宽度  以及 调用  锁定 表头和列  的JS函数。
		function cloneTableHeader_Width(){
			//document.body.clientWidth获得客户区域(浏览器窗口,不包括菜单栏和状态栏,就是内容窗口)的宽度 - 35像素的滚动条宽度。
			var myTable_Width = (document.body.clientWidth-35);
			
			//alert(myTable_Width);//测试屏幕宽度
			if((document.body.clientWidth-35)<855){
				myTable_Width=855; //宽度
			}
			//调用 锁定表头和 列 的JS函数
			$(document).ready(function () {
			            FixTable("MyTable", 2, myTable_Width, 200);
			        });
			}
			
		//-->
		</script>
	    <!-- End -->


顶起 吧，评论 吧~~~~~！！！~~~~不要不舍得 你的手指~~~ 敲两下 键盘~~~~点两下 鼠标的 事情。


Over!!!



SongYanJun2011
关注
  • 13
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 19
    评论
专栏目录
固定表头最简单的方法（仅IE有效）
02-07
固定表头最简单的方法（仅IE有效） 不需要使用top:[removed]this.offsetParent.scrollTop - 1);样式
IE,表头固定
weixin_34226182的博客
02-11 131
<html> <head> <title>表头固定</title> <style type="text/css"> /*表头样式*/ .scll { position: relative; top: expression(this.offsetParent.scrollTop); backg...
html中固定table 的表头 (IE)
mll881128的博客
08-22 587
方法1 ： [code="java"] 固定表头和列 .FixedTitleRow { position: relative; top: expression(this.offsetParent.scrollTop); z-index: ...
IE的表头固定/表头不动（使用expression）
weixin_34249367的博客
06-16 516
本文主要介绍在IE浏览器中，实现表头固定的一种方法。这种方法使用到了 IE 浏览器特有的 expression 方法。 表头固定DEMO1 主要代码： <style type="text/css"> .fixedHeaderTr { position:relative; //...
table表头固定 ,兼容IE.Firefox,google,360等等
蓝缘
04-10 6464
固定表头 body{ overflow:hidden;}/*让body不出现滚动条*/ table { background-color: #FFFFFF; border-collapse: collapse; border-left: 1px solid #000; border-spacing: 1px; border-top: 1px solid #
用div和ul标签画表格进行布局兼容火狐、ie6、ie7、Opera等浏览器
12-08
复制代码代码如下:<html> <head> <style> <!– #table { width:701px!important; width:700px; border-top:1px #000 solid; } #table ul { margin:0px; padding:0px;... display
css页面变灰度兼容ie、firefox、chrome、opera、safari实现样式
01-21
复制代码代码如下: ... -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); _filter:none; }
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
12-09
firefox 和 ie 的浏览器各自实现了input历史记录的功能，可以简化输入时的麻烦，但是，有时候弹出的下拉框会挡住页面显示内容，而且在某些情况下也不需要对input框进行记录，如号码查询的input框，用户不会对同一个...
JS日期选择器 兼容IE Firefox Opera等主流浏览器
05-03
JS日期选择器 兼容IE Firefox Opera等主流浏览器
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
01-19
有人喜欢用ie, firefox,还有人喜欢用腾讯tt,maxthon等等。虽然名字可能有很多种,但是内核我们知道下就没问题了。如IE内核的：IE，maxthon,tt都是。当然还有netscape内核!看大家怎么去判断! 由于在开发时碰上这个...
HTML+JS实现固定表头和锁定左列的Demo（兼容IE，火狐，谷歌等大众浏览器）
03-28
通过table的用来锁定表头，内置封装的JS控制锁定列，在页面中直接调用JS方法设定。
Jquery table固定表头,固定列,全浏览器兼容
11-19
Jquery table固定表头,固定列,全浏览器兼容 Jquery table固定表头,固定列,全浏览器兼容
div模拟table滚动时表头固定，兼容ie6
04-24
div模拟table滚动时表头固定，兼容ie6；且table自适应，表头的列宽与表体列宽一致，即表头边框与表体边框对齐
适用于IE的固定表头和列的表格样式[CSS]
weixin_34087307的博客
04-27 261
先给个图，如下： 解决如下需求：1. 当数据记录多的时候不希望分页，或者希望一页显示多一些数据的时候，表格出现纵向滚动条，要求表头不随着滚动条的滚动而滚动。2. 当数据列比较多的时候，出现横向滚动条，要求序号列、操作列等相关的列不随着横向滚动条滚动而滚动。 本文给出的解决办法仅适用于IE，支持IE6/7/8，是CSS的，没有啥好说的，直接给出列出代码并提供下载：FixTable.ra...
css 实现的TABLE 固定行列(IE)
f0rwin的专栏
11-21 4712
html>head> style type="text/css"> body,table, td, a { font:9pt; } /*重点：固定行头样式*/.scrollRowThead {     position: relative;      left: expression(thi
基于IE与css的表格行头与多层列头锁定方法
shuermao的专栏
03-17 300
  基于IE与css的表格行头与多层列头锁定方法   （左边图锁定了行头与列头，右边图仅锁定列头） 有许多的锁定或固定html表格表头的方法和技术，本文介绍的是一个基于IE和css的简易实现方法，基本思路为：使用div行级元素确定一个包含表格的区域，在区域滚动移动时定位非固定单元格的位置（top/left）。 1、确定表格区域定义一个有边框的div元素，并设置其overfl
table固定表头行及列，其中行包含合并单元格（支持IE，但鼠标滚动轮滚动效果不太友好）...
bangshangran1492的博客
11-13 194
PS:该代码用于学习，大部分不是原创，在他（她）人代码的基础上修改成自己想实现的效果，来源不明，因此没有加转载链接，如有问题，先在这里抱歉，请联系我删除。 内容实现的效果与上一篇一样，但是这个这个用了一点点js去实现IE没有办法兼容的一些属性，所以这个版本可以兼容IE的高版本和低版本，测试用的版本时IE8和IE11，其余版本没有测，哈哈哈，偷懒了，该版本有点瑕疵，滚动条下滑的时候tb2...
首尾相连的跑马灯效果（在IE Firefox Opera Safari中均已测试）
最新发布
05-31
对于首尾相连的跑马灯效果，可以使用CSS3的动画实现，具体操作如下： HTML代码： ``` <div class="marquee"> <span>这是跑马灯显示的内容</span> <span>这是跑马灯显示的内容</span> <span>这是跑马灯显示的内容</span> <span>这是跑马灯显示的内容</span> </div> ``` CSS代码： ``` .marquee { width: 100%; overflow: hidden; white-space: nowrap; } .marquee span { display: inline-block; padding-right: 100%; animation: marquee 15s linear infinite; } @keyframes marquee { 0% {transform: translateX(0);} 100% {transform: translateX(-100%);} } ``` 解析： - 将需要滚动的内容包裹在一个div中，并设置其宽度为100%，overflow为hidden，white-space为nowrap，这样可以实现内容在一行中不换行的效果。 - 对于每一个需要滚动的内容，使用display:inline-block，padding-right:100%实现每一个内容向右平移，占据与其宽度相等的空间。 - 使用CSS3动画实现跑马灯效果。在@keyframes中设置从0%到100%的动画，分别将内容平移至0%和-100%的位置。在.marquee span中设置动画的时间为15s，线性运动，并且无限循环。 这样，就可以实现首尾相连的跑马灯效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 19
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值