CSS简单table首列固定

日前公司业务需求,将几个页面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

时间: 2024-10-05 19:33:21

CSS简单table首列固定的相关文章

ElementUI Table 首行固定

本文地址: https://www.cnblogs.com/veinyin/p/12101047.html 需求描述:首行固定,吸附在表头下,数据多时其他行可以纵向滚动 方案一  两个表格拼凑 第一个表格展示头部和固定行 第二个表格展示其它数据 示意图如下 适用场景:仅横向 纵向均无滚动条时可用 若有横向滚动条,两个表格的滚动条是分开的,会出现滚动A  B不动,或滚动B A不动的情况,Windows下会展示两个横向滚动条,不美观 若有纵向滚动条,在Windows下滚动条是默认有宽度的,滚动条的宽

table的列固定

<body onload="showFix(true,false,initTableId);"> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name

Saiku如何固定查询结果table的表头和首列

在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件使用后效果都不理想,所以决定自己动手,丰衣足食. 我的思路来自:http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html 使用四个table,其中一个为saiku原有的,再增加3个,思路效果图: js代码实现: 1.找到SaikuTab

H5手机开发锁定表头和首列(惯性滚动)解决方案

前端时间移动端在做表格的时候需要这个功能,由于还有实现类似原生的惯性滚动功能,于是使用了iscroll插件. iscroll插件下载地址:iscroll5 该功能demo github地址: https://github.com/lyc152/front-special-effects/tree/master/table-fixed 下面看下代码结构: HTML: 1 <div class="data-table"> 2 <div class="t_l&qu

使用css固定table第一列

.table{width:100%;overflow-x: scroll;background-color:#7c95b5;} .fixedTable{width:160%;text-align: center;color:#fff;font-size:14px; border-collapse:collapse;} .fixedTable tr{line-height: 30px;border:1px solid #fff;} .fixedTable tr:first-child{height

CSS 控制table 滑动及调整列宽等问题总结

一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的height高度.然后设置overflow-y:scroll.这样当内容高度超过了height设定的高度,就会出现滚动条 css: .scroll_y{ max-height: 200px; /* 宽度大概比表头宽17px,具体值实际调试 */ width:531px; overflow-y: scrol

bootstrap table实现iview固定列的效果

因为bootstrap自带的固定列效果满足不了公司需求,所以借助fixed-table这个插件完成了iview固定列的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>左右两侧固定列,中间内容可以横向拖动</title> <link rel="stylesheet" hr

简单的CSS网页布局--一二列布局

1.一列布局 (一)一列自适应 自适应浏览器,随着浏览器的拉伸而变化,一般宽度采用百分比的写法,很简<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>一列布局自适应</title> <style type="text/css"> body{ margin: 0; /*清除浏览

锁定TABLE的首行和首列

1. 2. 3. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equ