table部分滚动 - 润新知

table部分滚动

引用别人的觉得不错

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
    function divScroll(scrollDiv){
        var scrollLeft = scrollDiv.scrollLeft;
        document.getElementById("tableDiv_title").scrollLeft = scrollLeft;
        document.getElementById("tableDiv_body").scrollLeft = scrollLeft;
    }
    function divYScroll(scrollYDiv){
        var scrollTop = scrollYDiv.scrollTop;
        document.getElementById("tableDiv_y").scrollTop = scrollTop;
    }
    function onwheel(event){
        var evt = event||window.event;
        var bodyDivY = document.getElementById("tableDiv_y");
        var scrollDivY = document.getElementById("scrollDiv_y");
        if (bodyDivY.scrollHeight>bodyDivY.offsetHeight){
            if (evt.deltaY){
                bodyDivY.scrollTop = bodyDivY.scrollTop + evt.deltaY*7;
                scrollDivY.scrollTop = scrollDivY.scrollTop + evt.deltaY*7;
            }else{
                bodyDivY.scrollTop = bodyDivY.scrollTop - evt.wheelDelta/5;
                scrollDivY.scrollTop = scrollDivY.scrollTop - evt.wheelDelta/5;
            }
        }
    }
</script>
<style type="text/css">
body {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border:0;
    border:none;
}

table td {
    border:1px solid #000;
    overflow:hidden;
    padding:0 2px;
}
</style>
</head>
<body>
<div style="500px; position:relative; padding-right:18px;">
<div style="position:relative;height:368px;overflow:hidden;100%">
<div style="padding-left:108px; auto; overflow:hidden; background:#f00;" id="tableDiv_title" >
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td style="min-30px; max-30px; left:0; top:0; 30px; overflow:hidden; background-color:#f00;position:absolute;z-index:1;">000</td>
<td style="min-74px; max-74px; left:30px; top:0; 74px; overflow:hidden; background-color:#f00;position:absolute;z-index:1;">自动表格</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >最后一列</td>
</tr>
</table>
</div>
<div style="overflow:hidden; position:absolute;height:128px; 100%;" id="tableDiv_y" onmousewheel="onwheel(event);" onwheel="onwheel(event);">
<div style="padding-left:108px; auto;overflow:hidden;" id="tableDiv_body">
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">001</td>
<td style="min-74px; max-74px; left: 30px; 74px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff; position:absolute; z-index:1;">002</td>
<td style="min-74px; max-74px; left:30px; 74px; overflow:hidden;background-color:#fff; position:absolute; z-index:1;">自动表格</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">003</td>
<td style="min-74px; max-74px;left: 30px; 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">004</td>
<td style="min-74px; max-74px; left: 30px; 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">005</td>
<td style="min-74px; max-74px; left: 30px; 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">006</td>
<td style="min-74px; max-74px; left: 30px; 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">007</td>
<td style="min-74px; max-74px; left: 30px; 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">008</td>
<td style="min-74px; max-74px; left: 30px; 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">009</td>
<td style="min-74px; max-74px; left: 30px; 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">010</td>
<td style="min-74px; max-74px; left: 30px; 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >56454自动</td>
<td style="min- 100px; max- 100px; 100px;" >最后一列</td>
</tr>
</table>
</div>
</div>
<div style="background-color:#eee;overflow:hidden;top:150px; 100%; z-index:2;position:absolute;">
<div style="margin-left:108px; auto;overflow-x:scroll;overflow-y:hidden;" onscroll='divScroll(this);'>
<div style="630px; height:1px;"></div>
</div>
</div>
</div>
<div id="scrollDiv_y" style="display:block; overflow-x:hidden; overflow-y:scroll; position:absolute; top:22px; right:0px; height:118px; padding-bottom:10px;" onscroll='divYScroll(this);'>
<div style="1px; height:194px;"></div>
</div>
</div>
</div>
</body>
</html>

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ϞҪ͢τյ</title>
<script type="text/javascript">
   function divScroll(scrollDiv){
       var scrollLeft = scrollDiv.scrollLeft;
       document.getElementById("tableDiv_title").scrollLeft = scrollLeft;
       document.getElementById("tableDiv_body").scrollLeft = scrollLeft;
   }
   function divYScroll(scrollYDiv){
       var scrollTop = scrollYDiv.scrollTop;
       document.getElementById("tableDiv_y").scrollTop = scrollTop;
   }
   function onwheel(event){
       var evt = event||window.event;
       var bodyDivY = document.getElementById("tableDiv_y");
       var scrollDivY = document.getElementById("scrollDiv_y");
       if (bodyDivY.scrollHeight>bodyDivY.offsetHeight){
           if (evt.deltaY){
               bodyDivY.scrollTop = bodyDivY.scrollTop + evt.deltaY*7;
               scrollDivY.scrollTop = scrollDivY.scrollTop + evt.deltaY*7;
           }else{
               bodyDivY.scrollTop = bodyDivY.scrollTop - evt.wheelDelta/5;
               scrollDivY.scrollTop = scrollDivY.scrollTop - evt.wheelDelta/5;
           }
       }
   }
</script>
<style type="text/css">
body {
   margin:0;
   padding:0;
}
table {
   border-collapse:collapse;
   border:0;
   border:none;
}

table td {
   border:1px solid #000;
   overflow:hidden;
   padding:0 2px;
}
</style>
</head>
<body>
<div style="500px; position:relative; padding-right:18px;">
<div style="position:relative;height:368px;overflow:hidden;100%">
<div style="padding-left:108px; auto; overflow:hidden; background:#f00;" id="tableDiv_title" >
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td style="min-30px; max-30px; left:0; top:0; 30px; overflow:hidden; background-color:#f00;position:absolute;z-index:1;">000</td>
<td style="min-74px; max-74px; left:30px; top:0; 74px; overflow:hidden; background-color:#f00;position:absolute;z-index:1;">ؔ֯ҭٱ</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >خ۳һ</td>
</tr>
</table>
</div>
<div style="overflow:hidden; position:absolute;height:128px; 100%;" id="tableDiv_y" onmousewheel="onwheel(event);" onwheel="onwheel(event);">
<div style="padding-left:108px; auto;overflow:hidden;" id="tableDiv_body">
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">001</td>
<td style="min-74px; max-74px; left: 30px; 74px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">ؔ֯ҭٱ</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >خ۳һ</td>
</tr>
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff; position:absolute; z-index:1;">002</td>
<td style="min-74px; max-74px; left:30px; 74px; overflow:hidden;background-color:#fff; position:absolute; z-index:1;">ؔ֯ҭٱ</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >خ۳һ</td>
</tr>
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">003</td>
<td style="min-74px; max-74px;left: 30px; 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">ؔ֯ҭٱ</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >خ۳һ</td>
</tr>
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">004</td>
<td style="min-74px; max-74px; left: 30px; 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">ؔ֯ҭٱ</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >خ۳һ</td>
</tr>
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">005</td>
<td style="min-74px; max-74px; left: 30px; 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">ؔ֯ҭٱ</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >خ۳һ</td>
</tr>
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">006</td>
<td style="min-74px; max-74px; left: 30px; 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">ؔ֯ҭٱ</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >خ۳һ</td>
</tr>
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">007</td>
<td style="min-74px; max-74px; left: 30px; 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">ؔ֯ҭٱ</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >خ۳һ</td>
</tr>
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">008</td>
<td style="min-74px; max-74px; left: 30px; 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">ؔ֯ҭٱ</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >خ۳һ</td>
</tr>
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">009</td>
<td style="min-74px; max-74px; left: 30px; 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">ؔ֯ҭٱ</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >خ۳һ</td>
</tr>
<tr>
<td style="min-30px; max-30px; left:0; 30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">010</td>
<td style="min-74px; max-74px; left: 30px; 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">ؔ֯ҭٱ</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >56454ؔ֯</td>
<td style="min- 100px; max- 100px; 100px;" >خ۳һ</td>
</tr>
</table>
</div>
</div>
<div style="background-color:#eee;overflow:hidden;top:150px; 100%; z-index:2;position:absolute;">
<div style="margin-left:108px; auto;overflow-x:scroll;overflow-y:hidden;" onscroll='divScroll(this);'>
<div style="630px; height:1px;"></div>
</div>
</div>
</div>
<div id="scrollDiv_y" style="display:block; overflow-x:hidden; overflow-y:scroll; position:absolute; top:22px; right:0px; height:118px; padding-bottom:10px;" onscroll='divYScroll(this);'>
<div style="1px; height:194px;"></div>
</div>
</div>
</div>
</body>
</html>
相关阅读:
中芯国际内争的真相
 对Delphi控件作用的新理解（控件本身的源代码就是一个很强的工业级源码）
百度云怎么赚钱
 百度地图在某架构下找不到符号.a文件的问题
 忽然发现，if语句没有相应的continue功能
 可怜的苏联，以及可恨的戈尔巴乔夫
 感觉镀金没有用，兼论小公司与大公司的选择
 开发团队的民主集中制
 关于明末历史（已全部写完）
CF 322B Ciel and Flowers 贪心水题
原文地址：https://www.cnblogs.com/zhixw/p/6740901.html