领星动网编程开发之爆炸小宇宙

cnitblog.com/lxasp - - 有一种信念叫做编程
posts - 54, comments - 34, trackbacks - 0, articles - 0
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>table-head-fix</title>
    <meta name="generator" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
<style>
.tbHeadFix 
{
    font-size
: 12px;
    position
: relative;
    border
: 0px solid #E4F1FF;
    overflow
: hidden;
    color
: #000;
    +border-right
: 0px solid #cde;
    +padding-right
: 2px;
}

.tbHeadFix div.theadDivBox 
{
    float
: left;
    padding-right
: 40px;
}
.tbHeadFix div.tbodyDiv table 
{
/*    margin-bottom: 10px;*/
    border-bottom
: 0px;
    margin-bottom
: 0px;
}

.tbHeadFix div.theadDiv 
{
    background
: #fafafa;
    position
: relative;
    border
: 1px solid #cde;
    border-bottom
: 0px;
    overflow
: hidden;
    +width
:100%;
}
.tbHeadFix div.theadDiv table 
{
    border-right
: 1px solid #fff;
}

.tbHeadFix div.tbodyDiv 
{
    border
: 1px solid #cde;
    border-top
: 0px;
    background
: #fff;
    overflow
: auto;
    position
: relative;
    +width
:100%;
}
.tbHeadFix div.tbodyDiv table 
{
    border-bottom
: 1px solid #cde;
}
.tbHeadFix div.theadDiv th, .tbHeadFix div.tbodyDiv td
{
    text-align
: left;
    border-right
: 1px solid #def;
    border-left
: 1px solid #fff;
    overflow
: hidden;
    vertical-align
: top !important;
}
.tbHeadFix div.theadDiv th div, .tbHeadFix div.tbodyDiv td div
{
    padding
: 5px;
    border-left
: 0px solid #fff;
}
.tbHeadFix div.theadDiv th 
{
    font-weight
: normal;
    height
: 24px;
    cursor
: default;
    white-space
: nowrap;
    overflow
: hidden;
}

.tbHeadFix div.tbodyDiv td 
{
    border-bottom
: 1px solid #fff;
    vertical-align
: top;
    white-space
: nowrap;
}

.tbHeadFix div.tbodyDiv td div 
{
    border-top
: 0px solid #fff;
    padding-bottom
: 4px;
}

.tbHeadFix tr.trZ td 
{
    background
: #F0F8FF;
    border-bottom
: 1px solid #F0F8FF;
}

.tbHeadFix div.tbodyDiv tr:hover td
{
    background
: #d9ebf5;
    border-left
: 1px solid #eef8ff;
    border-bottom
: 1px dotted #a8d8eb;
}

.tbHeadFix div.theadDiv th div, .tbHeadFix div.tbodyDiv td div
{
    +overflow
: hidden;
}
</style>

</head>
<body>




<div id="table1">
    <div style="width: 365px;" class="tbHeadFix">

        <div class="theadDiv" id="table1_theadDiv">
            <div class="theadDivBox">
                <table cellpadding="0" cellspacing="0">
                    <thead>
                        <tr>
                            <th class="" axis="col0" abbr="标识号" align="left">
                                <div class="" style="text-align: left; width: 100px;">标识号</div>
                            </th>
                            <th class="" axis="col1" abbr="标题" align="left">
                                <div class="" style="text-align: left; width: 100px;">标题</div>
                            </th>
                            <th class="" axis="col2" align="left">
                                <div class="" style="text-align: left; width: 100px;">语句</div>
                            </th>
                            <th class="" axis="col3" align="left">
                                <div class="" style="text-align: left; width: 100px;">类型</div>
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

        <div style="height: 260px;" class="tbodyDiv" id="table1_tbodyDiv">
            <table id="flex1" border="0" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr id="row146">
                        <td align="left">
                            <div style="text-align: left; width: 100px;">146</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">高峰时段运行时间</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">
                                </div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">0</div>
                        </td>
                    </tr>
                    <tr id="row145" class="trZ">
                        <td align="left">
                            <div style="text-align: left; width: 100px;">145</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">操作员导入企信通信息</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">/*inner cell*/</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">0</div>
                        </td>
                    </tr>
                    <tr id="row144">
                        <td align="left">
                            <div style="text-align: left; width: 100px;">144</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">业务用车出差管理</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">/*inner cell*/</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">0</div>
                        </td>
                    </tr>
                    <tr id="row143" class="trZ">
                        <td align="left">
                            <div style="text-align: left; width: 100px;">143</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">在职操作员及家属联系方式</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">/*inner cell*/</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">0</div>
                        </td>
                    </tr>
                    <tr id="row142">
                        <td align="left">
                            <div style="text-align: left; width: 100px;">142</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">SMS信息发送日志</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">/*inner cell*/</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">0</div>
                        </td>
                    </tr>
                    <tr id="row141" class="trZ">
                        <td align="left">
                            <div style="text-align: left; width: 100px;">141</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">短信发送管理</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">/*inner cell*/</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">0</div>
                        </td>
                    </tr>
                    <tr id="row140">
                        <td align="left">
                            <div style="text-align: left; width: 100px;">140</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">7.2计价与实收金额差异对比</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">system_publiclogInfo</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">0</div>
                        </td>
                    </tr>
                    <tr id="row139" class="trZ">
                        <td align="left">
                            <div style="text-align: left; width: 100px;">139</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">7.1公共工作班次运行信息</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">/*inner cell*/</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">0</div>
                        </td>
                    </tr>
                    <tr id="row138">
                        <td align="left">
                            <div style="text-align: left; width: 100px;">138</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">4.3操作员演示非法汇总</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">/*inner cell*/</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">0</div>
                        </td>
                    </tr>
                    <tr id="row137" class="trZ">
                        <td align="left">
                            <div style="text-align: left; width: 100px;">137</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">4.4东西演示非法累计</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">/*inner cell*/</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">0</div>
                        </td>
                    </tr>
                    <tr id="row136">
                        <td align="left">
                            <div style="text-align: left; width: 100px;">136</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">特定数据分析20130628</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">a.mc_</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">0</div>
                        </td>
                    </tr>
                    <tr id="row135" class="trZ">
                        <td align="left">
                            <div style="text-align: left; width: 100px;">135</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">BET三个月数据正常的东西</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">bet</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">0</div>
                        </td>
                    </tr>
                    <tr id="row134">
                        <td align="left">
                            <div style="text-align: left; width: 100px;">134</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">某单位需要的操作员资料</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">/*inner cell*/</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">0</div>
                        </td>
                    </tr>
                    <tr id="row133" class="trZ">
                        <td align="left">
                            <div style="text-align: left; width: 100px;">133</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">5.6演示协会设备年审</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">/*inner cell*/</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">0</div>
                        </td>
                    </tr>
                    <tr id="row132">
                        <td align="left">
                            <div style="text-align: left; width: 100px;">132</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">整理抽查问题汇总</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">/*inner cell*/</div>
                        </td>
                        <td align="left">
                            <div style="text-align: left; width: 100px;">0</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>


    </div>
</div>

<script>

document.getElementById(
"table1_tbodyDiv").onscroll=function(e) {
    document.getElementById(
"table1_theadDiv").scrollLeft = document.getElementById("table1_tbodyDiv").scrollLeft;
};

</script>



</body>
</html>
只有注册用户登录后才能发表评论。