zoukankan
html css js c++ java
[原]长表头表格 竖直仅滚动内容区 水平滚动表头和内容区
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>
<
HTML
>
<
HEAD
>
<
TITLE
>
scroll test
</
TITLE
>
<
META
NAME
="Generator"
CONTENT
="EditPlus"
>
<
META
NAME
="Author"
CONTENT
=""
>
<
META
NAME
="Keywords"
CONTENT
=""
>
<
META
NAME
="Description"
CONTENT
=""
>
<
style
>
#head
{
}
{
width
:
900
;
}
#head th
{
}
{
width
:
100
;
}
#body
{
}
{
width
:
900
;
}
#body td
{
}
{
width
:
100
;
}
#scroll
{
}
{
width
:
917
;
display
:
hidden
;
}
#divHead
{
}
{
width
:
300
;
height
:
20
;
overflow
:
hidden
;
}
#divBody
{
}
{
width
:
317
;
height
:
100
;
overflow-x
:
hidden
;
overflow-y
:
scroll
;
}
#divScroll
{
}
{
width
:
317
;
height
:
20
;
overflow-x
:
scroll
;
overflow-y
:
hidden
}
</
style
>
<
script
language
="javascript"
>
function
scroll(src)
{
//
debugger;
//
document.all('div2').style.overflowX = 'visible';
document.all('divHead').scrollLeft
=
src.scrollLeft;
document.all('divBody').scrollLeft
=
src.scrollLeft;
}
//
计算滚动条的宽度
window.onload
=
function
()
{
var
obj
=
document.all('scrollbar');
//
debugger;
var
scrollWidth
=
obj.offsetWidth
-
obj.clientWidth;
//
alert(scrollWidth); //---- 17px
obj.style.display
=
"
none
"
;
}
</
script
>
</
HEAD
>
<
BODY
>
<
center
>
<
textarea
id
="scrollbar"
style
="visibility:hidden; border-0;"
></
textarea
>
<
table
>
<
tr
>
<
td
>
<
div
id
="divHead"
>
<
table
border
="1"
id
="head"
>
<
tr
>
<
th
>
A
</
th
><
th
>
B
</
th
><
th
>
C
</
th
><
th
>
D
</
th
><
th
>
E
</
th
><
th
>
F
</
th
><
th
>
G
</
th
><
th
>
H
</
th
><
th
>
I
</
th
>
</
tr
>
</
table
>
</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
id
="divBody"
>
<
table
border
="1"
id
="body"
>
<
tr
><
td
>
a
</
td
><
td
>
b
</
td
><
td
>
c
</
td
><
td
>
d
</
td
><
td
>
e
</
td
><
td
>
f
</
td
><
td
>
g
</
td
><
td
>
h
</
td
><
td
>
i
</
td
></
tr
>
<
tr
><
td
>
a
</
td
><
td
>
b
</
td
><
td
>
c
</
td
><
td
>
d
</
td
><
td
>
e
</
td
><
td
>
f
</
td
><
td
>
g
</
td
><
td
>
h
</
td
><
td
>
i
</
td
></
tr
>
<
tr
><
td
>
a
</
td
><
td
>
b
</
td
><
td
>
c
</
td
><
td
>
d
</
td
><
td
>
e
</
td
><
td
>
f
</
td
><
td
>
g
</
td
><
td
>
h
</
td
><
td
>
i
</
td
></
tr
>
<
tr
><
td
>
a
</
td
><
td
>
b
</
td
><
td
>
c
</
td
><
td
>
d
</
td
><
td
>
e
</
td
><
td
>
f
</
td
><
td
>
g
</
td
><
td
>
h
</
td
><
td
>
i
</
td
></
tr
>
<
tr
><
td
>
a
</
td
><
td
>
b
</
td
><
td
>
c
</
td
><
td
>
d
</
td
><
td
>
e
</
td
><
td
>
f
</
td
><
td
>
g
</
td
><
td
>
h
</
td
><
td
>
i
</
td
></
tr
>
<
tr
><
td
>
a
</
td
><
td
>
b
</
td
><
td
>
c
</
td
><
td
>
d
</
td
><
td
>
e
</
td
><
td
>
f
</
td
><
td
>
g
</
td
><
td
>
h
</
td
><
td
>
i
</
td
></
tr
>
<
tr
><
td
>
a
</
td
><
td
>
b
</
td
><
td
>
c
</
td
><
td
>
d
</
td
><
td
>
e
</
td
><
td
>
f
</
td
><
td
>
g
</
td
><
td
>
h
</
td
><
td
>
i
</
td
></
tr
>
<
tr
><
td
>
a
</
td
><
td
>
b
</
td
><
td
>
c
</
td
><
td
>
d
</
td
><
td
>
e
</
td
><
td
>
f
</
td
><
td
>
g
</
td
><
td
>
h
</
td
><
td
>
i
</
td
></
tr
>
<
tr
><
td
>
a
</
td
><
td
>
b
</
td
><
td
>
c
</
td
><
td
>
d
</
td
><
td
>
e
</
td
><
td
>
f
</
td
><
td
>
g
</
td
><
td
>
h
</
td
><
td
>
i
</
td
></
tr
>
<
tr
><
td
>
a
</
td
><
td
>
b
</
td
><
td
>
c
</
td
><
td
>
d
</
td
><
td
>
e
</
td
><
td
>
f
</
td
><
td
>
g
</
td
><
td
>
h
</
td
><
td
>
i
</
td
></
tr
>
<
tr
><
td
>
a
</
td
><
td
>
b
</
td
><
td
>
c
</
td
><
td
>
d
</
td
><
td
>
e
</
td
><
td
>
f
</
td
><
td
>
g
</
td
><
td
>
h
</
td
><
td
>
i
</
td
></
tr
>
</
table
>
</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
id
="divScroll"
onscroll
="scroll(this)"
>
<
div
id
="scroll"
></
div
>
</
div
>
</
td
>
</
tr
>
</
table
>
</
center
>
</
BODY
>
</
HTML
>
查看全文
相关阅读:
GridView Footer页脚统计实现多行
Windows cmd 启动 tomcat 中文乱码问题
git
CentOS 的 dnf 命令
不知道是否是wcf 的一个bug
图像卷积与滤波的一些知识点
Phaser开源2d引擎 javascript/html5游戏框架
关于Ldoc
自写vim插件ldoc.vim,提供智能的lua注释代码补全
svn diff 使用 vimdiff 作为比较差异工具
原文地址:https://www.cnblogs.com/focus/p/917558.html
最新文章
机器学习相关数据库(转)
scrapy在windows上安装笔记(转)
Linux(RedHat,Centos)上scrapy详尽安装笔记(转)
[转] 数据科学家面试常见的77个问题
Selenium with Python 用于网站抓取
python字典的索引快速搜索方法比较
jquery checkbox选中、改变状态、change和click事件
移动端上传图片
停下来想一下 自己再干什么
关于slideup和slidedown 鼠标多次滑过累积的动画效果
热门文章
HTML中<b>标签和<strong>便签的区别
return;,return false,return true----------浅析
开始进入工作状态之后。。。要学习的东西太多啦。。。
激动又忐忑,我要开博客了
C++ (14) 异常处理
我这一年
cas登录成功返回用户更多信息
php常用系统函数
Java MD5加密
Oracle字符串分割函数
Copyright © 2011-2022 走看看