Freeze table

最新推荐文章于 2025-01-17 10:51:07 发布

原创最新推荐文章于 2025-01-17 10:51:07 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #border #class #cordova #scroll #function

Script 同时被 2 个专栏收录

7 篇文章

订阅专栏

HTML + CSS

6 篇文章

订阅专栏

本文介绍了一种使用 HTML 和 CSS 实现表格冻结效果的方法，通过将表格分为固定部分和滚动部分，确保左侧列始终保持可见，同时右侧数据部分可以水平滚动。此方案适用于展示大量数据的场景。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>= Freeze = Table</title>
<style type="text/css">
div.freeze
{
    border:solid 1px;
    width:800px;
    overflow:hidden;
}

div.horizontal
{
    overflow-x:hidden;
    overflow-y:scroll;
    height:90px;
}

div.freeze table.schema
{
}

div.freeze table.schema table.freeze
{
}

div.freeze table.schema table.data
{
    position:relative;
}


div.freeze table.schema td.col
{
    padding:1px 0px 1px 1px;
    position:relative;
    vertical-align:top;
    overflow:hidden;
}
div.freeze table.schema td.left
{
}
div.freeze table.schema td.right
{
}

div.freeze table.schema td.col thead
{
}
div.freeze table.schema td.col thead tr
{
}



div.freeze table.scroll
{
    width:100%;
}
div.freeze table.scroll td.col
{
    text-indent:6px;
    line-height:14px;
    font-size:14px;
    border:solid 1px #aaaaaa;
    width:21px;
    height:21px;
    cursor:pointer;
}
div.freeze table.scroll td.scroll
{
    position:relative;
    border:solid 1px #aaaaaa;
    background-color:#eeeeee;
    vertical-align:top;
}
div.freeze table.scroll div.scroll
{
    position:absolute;
    width:18px;
    height:20px;
    border:solid 1px #333333;
    background-color:#999999;
    cursor:w-resize;
}


</style>
<script type="text/javascript" language="javascript">
var IsIE = (navigator.appName=="Microsoft Internet Explorer");
var GetEvent = IsIE ? function(base) { return window.event; } : function(base) { return (base.length > 0 && (base[0].constructor == Event || base[0].constructor == MouseEvent)) ? base[0] : null; };
var GetEventElement = function(base) { var ev = GetEvent(base); if (ev == null) return null; return IsIE ? ev.srcElement : ev.target; };

function moveTo(navi, arg) {
    var event = GetEvent(arg);
    var table = document.getElementById("tdData");
    //var width = parseInt(table.clientWidth) - parseInt(table.parentNode.offsetLeft);
    var width = parseInt(navi.clientWidth) + 40;
    var left = parseInt(width * (event.x || event.layerX) / navi.clientWidth);
    if (left < 20) left = 0;
    if (width - left < 20) left = width;
    table.style.left = (0-left) + "px";
}
</script>
</head>

<body>

<div class="freeze">

<div class="--horizontal">
<table class="schema" cellpadding="0" cellspacing="0" border="0">
<tr><td class="col left">
    <table class="freeze" id="tbFreeze" cellpadding="0" cellspacing="0" border="1" rules="all" width="350px;">
        <thead>
            <tr>
                <th style="width:50px;">ID</th>
                <th style="width:300px;">Name</th>
            </tr>
        </thead>
        <tr>
            <td>1</td>
            <td>CYBERGUYS/EFILLIATE</td>
        </tr>
        <tr>
            <td>2</td>
            <td>EXECUTIVE OFFICE FURNITURE</td>
        </tr>
        <tr>
            <td>3</td>
            <td>GLOBAL EQUIPMENT COMPANY</td>
        </tr>
        <tr>
            <td>4</td>
            <td>KENNY PRODUCTS, INC.</td>
        </tr>
        <tr>
            <td>5</td>
            <td>PREMIER ELECTION SOLUTIONS</td>
        </tr>
    </table>
</td>
<td class="col right">
    <table class="data" id="tdData" cellpadding="0" cellspacing="0" border="1" rules="all" width="900px;">
        <thead>
            <tr>
                <th style="width:450px;">Description</th>
                <th style="width:450px;">Description</th>
            </tr>
        </thead>
        <tr>
            <td>1321 White Rock Road, Rancho Cordova, CA 95742-6505</td>
            <td>1321 White Rock Road, Rancho Cordova, CA 95742-6505</td>
        </tr>
        <tr>
            <td>241 East Hamilton St, Tallahassee, FL 32301</td>
            <td>241 East Hamilton St, Tallahassee, FL 32301</td>
        </tr>
        <tr>
            <td>"2505 Mill Center Parkway, Suite 100, Buford, GA 30518"</td>
            <td>"2505 Mill Center Parkway, Suite 100, Buford, GA 30518"</td>
        </tr>
        <tr>
            <td>13309 S. Normandie Avenue, Gardena, CA 90249</td>
            <td>13309 S. Normandie Avenue, Gardena, CA 90249</td>
        </tr>
        <tr>
            <td>1253 Allen Station Parkway, Allen, TX 75002</td>
            <td>1253 Allen Station Parkway, Allen, TX 75002</td>
        </tr>
    </table>
</td></tr>
</table>
</div>

<table class="scroll" cellpadding="0" cellspacing="0" border="0" rules="none">
    <tr>
        <td style="width:350px;">1,2,3</td>
        <td class="col"><</td>
        <td class="scroll" onclick="moveTo(this, arguments);"><div class="scroll"></div></td>
        <td class="col">></td>
    </tr>
</table>

</div>
</body>
</html>