首页 > Web开发 > 详细

CSS简单table首列固定

时间:2014-11-26 18:19:42      阅读:487      评论:0      收藏:0      [点我收藏+]

日前公司业务需求,将几个页面Table(也有一个页面几个table的情况)首列固定。网上查找资料最简便的做法是,将固定列(或者行)与滑动数据分别放在两个table里。因为我的需求是在 原有的table上进行编辑修改,不宜大幅度动原有代码所以没有采用。

考虑到时间成本的问题最终解决代码如下。值得注意的地方有几点:

第一,使用 css experssion动态表达式取值 加上eval绑定为较规范写法(也有说可以兼容IE6)。

第二,必须使用兼容视图(IE)浏览,否则Freezingcol中left属性取值不到。

第三,动态取值scrollLeft造成肉眼可见轻微页面刷新,如果优化用户体验,建议使用js或者jq

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>固定表格表头 </title>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <link href="http://127.0.0.1:8077/PQM/style/PQM.css" rel="Stylesheet" type="text/css" />
    <style type="text/css"> 
        .FreezingCol
        {
            z-index: 1;
            left: expression(eval(document.getElementById("freezingDiv").scrollLeft));
            position: relative;
        }
        
        #table_0 tr
        {
            color: #003399;
            background-color: White;
        }
    </style>
    <script src="http://127.0.0.1:8077/javascript/jquery1.6.js" type="text/javascript"></script>
    <script type="text/javascript">
        function show(tableID, obj, title) {
            if ($("#" + tableID + " .sub").css("display") != "none") {
                $("#" + tableID + " .sub").css("display", "none");
                $("#" + tableID + " a").html("" + title);
            }
            else {
                $("#" + tableID + " .sub").css("display", "block");

                $("#" + tableID + " a").html("" + title);
            }
        }

    </script>
</head>
<body>
    <div id="freezingDiv" style="overflow:auto; width:700px; height:450px">
        <table id="table_0" class="report_table" cellspacing="0" style="width: 4455px; border-collapse: collapse;">
            <caption  class="FreezingCol" align="Left">
                Sales Start:&nbsp; <span class="black">1999-08-18</span>
            </caption>
            <tr>
                <td class="normal  modeltitle black FreezingCol">
                    CMA-D2CE
                </td>
                <td class="normal" style="width: 80px;">
                    2011-11
                </td>
                <td class="normal" style="width: 80px;">
                    2011-12
                </td>
                <td class="normal" style="width: 80px;">
                    2012-1
                </td>
                <td class="normal" style="width: 80px;">
                    2012-2
                </td>
                <td class="normal" style="width: 80px;">
                    2012-3
                </td>
                <td class="normal" style="width: 80px;">
                    2012-4
                </td>
                <td class="normal" style="width: 80px;">
                    2012-5
                </td>
                <td class="normal" style="width: 80px;">
                    2012-6
                </td>
                <td class="normal" style="width: 80px;">
                    2012-7
                </td>
                <td class="normal" style="width: 80px;">
                    2012-8
                </td>
                <td class="normal" style="width: 80px;">
                    2012-9
                </td>
                <td class="normal" style="width: 80px;">
                    2012-10
                </td>
                <td class="normal" style="width: 80px;">
                    2012-11
                </td>
                <td class="normal" style="width: 80px;">
                    2012-12
                </td>
                <td class="normal" style="width: 80px;">
                    2013-1
                </td>
                <td class="normal" style="width: 80px;">
                    2013-2
                </td>
                <td class="normal" style="width: 80px;">
                    2013-3
                </td>
                <td class="normal" style="width: 80px;">
                    2013-4
                </td>
                <td class="normal" style="width: 80px;">
                    2013-5
                </td>
                <td class="normal" style="width: 80px;">
                    2013-6
                </td>
                <td class="normal" style="width: 80px;">
                    2013-7
                </td>
                <td class="normal" style="width: 80px;">
                    2013-8
                </td>
                <td class="normal" style="width: 80px;">
                    2013-9
                </td>
                <td class="normal" style="width: 80px;">
                    2013-10
                </td>
                <td class="normal" style="width: 80px;">
                    2013-11
                </td>
                <td class="normal" style="width: 80px;">
                    2013-12
                </td>
                <td class="normal" style="width: 80px;">
                    2014-1
                </td>
                <td class="normal" style="width: 80px;">
                    2014-2
                </td>
                <td class="normal" style="width: 80px;">
                    2014-3
                </td>
                <td class="normal" style="width: 80px;">
                    2014-4
                </td>
                <td class="normal" style="width: 80px;">
                    2014-5
                </td>
                <td class="normal" style="width: 80px;">
                    2014-6
                </td>
                <td class="normal" style="width: 80px;">
                    2014-7
                </td>
                <td class="normal" style="width: 80px;">
                    2014-8
                </td>
                <td class="normal" style="width: 80px;">
                    2014-9
                </td>
                <td class="normal" style="width: 80px;">
                    2014-10
                </td>
            </tr>
            <tr>
                <td class="bold  title FreezingCol">
                    Accu.Defect Rate
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
            </tr>
            <tr>
                <td class="normal  title FreezingCol">
                    Defect Rate
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
                <td class="normal" style="width: 80px;">
                    0.00%
                </td>
            </tr>
            <tr>
                <td class="normal  title FreezingCol">
                    Accu.Sales Qty
                </td>
                <td class="normal" style="width: 80px;">
                    214
                </td>
                <td class="normal" style="width: 80px;">
                    214
                </td>
                <td class="normal" style="width: 80px;">
                    214
                </td>
                <td class="normal" style="width: 80px;">
                    214
                </td>
                <td class="normal" style="width: 80px;">
                    214
                </td>
                <td class="normal" style="width: 80px;">
                    214
                </td>
                <td class="normal" style="width: 80px;">
                    214
                </td>
                <td class="normal" style="width: 80px;">
                    214
                </td>
                <td class="normal" style="width: 80px;">
                    224
                </td>
                <td class="normal" style="width: 80px;">
                    224
                </td>
                <td class="normal" style="width: 80px;">
                    224
                </td>
                <td class="normal" style="width: 80px;">
                    224
                </td>
                <td class="normal" style="width: 80px;">
                    224
                </td>
                <td class="normal" style="width: 80px;">
                    224
                </td>
                <td class="normal" style="width: 80px;">
                    234
                </td>
                <td class="normal" style="width: 80px;">
                    234
                </td>
                <td class="normal" style="width: 80px;">
                    244
                </td>
                <td class="normal" style="width: 80px;">
                    244
                </td>
                <td class="normal" style="width: 80px;">
                    244
                </td>
                <td class="normal" style="width: 80px;">
                    244
                </td>
                <td class="normal" style="width: 80px;">
                    244
                </td>
                <td class="normal" style="width: 80px;">
                    244
                </td>
                <td class="normal" style="width: 80px;">
                    244
                </td>
                <td class="normal" style="width: 80px;">
                    244
                </td>
                <td class="normal" style="width: 80px;">
                    244
                </td>
                <td class="normal" style="width: 80px;">
                    244
                </td>
                <td class="normal" style="width: 80px;">
                    244
                </td>
                <td class="normal" style="width: 80px;">
                    244
                </td>
                <td class="normal" style="width: 80px;">
                    244
                </td>
                <td class="normal" style="width: 80px;">
                    244
                </td>
                <td class="normal" style="width: 80px;">
                    244
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
            </tr>
            <tr>
                <td class="normal  title FreezingCol">
                    Sales Qty
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    10
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    10
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    10
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
            </tr>
            <tr>
                <td class="normal  title FreezingCol">
                    Accu.Defect Qty
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
            </tr>
            <tr>
                <td class="normal title FreezingCol">
                    Defect Qty
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
                <td class="normal" style="width: 80px;">
                    0
                </td>
            </tr>
            <tr>
                <td class="bold title FreezingCol">
                    Accu.Cost Rate
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
                <td class="bold" style="width: 80px;">
                    0.00%
                </td>
            </tr>
            <tr>
                <td class="normal title FreezingCol">
                    Accu. Cost
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
            </tr>
            <tr>
                <td class="normal title FreezingCol">
                    <a href="javascript:void(0);" onclick="show(‘table_0‘,this,‘Cost Amount‘);">▼Cost Amount</a>
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
                <td class="normal" style="width: 80px;">
                    0.00
                </td>
            </tr>
            <tr>
                <td class="sub title FreezingCol">
                    &nbsp; &nbsp; Parts
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
            </tr>
            <tr>
                <td class="sub title FreezingCol">
                    &nbsp; &nbsp; Labor
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
            </tr>
            <tr>
                <td class="sub title FreezingCol">
                    &nbsp; &nbsp; Trip
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
            </tr>
            <tr>
                <td class="sub title FreezingCol">
                    &nbsp; &nbsp; Etc.
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
                <td class="sub" style="width: 80px;">
                    0.00
                </td>
            </tr>
            <tr>
                <td class="bold title FreezingCol">
                    Accu. Unit Cost
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
                <td class="bold" style="width: 120px;">
                    0.00
                </td>
            </tr>
            <tr>
                <td class="normal  title FreezingCol">
                    Defect Rate(By Month)
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
            </tr>
            <tr>
                <td class="normal  title FreezingCol">
                    Accu.Defect Rate(By Year)
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
                <td class="normal" style="width: 120px;">
                    0.00%
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

 

原文参考一篇来自jb51上的文章,找不到原链接。见谅。

欢迎留言评论,共同进步。允许转载,请标明原地址

http://www.cnblogs.com/happyxiaoyao/p/4123852.html
技术交流群:165609857

CSS简单table首列固定

原文:http://www.cnblogs.com/happyxiaoyao/p/4123852.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!