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
>
查看全文
相关阅读:
ubuntu 10.04安装增强功能 共享文件夹
CRF简介入门
Ant 的build.xml 详解
eclipse中各种颜色和背景的设置
第13章 类继承 --抽象基类
第13章 类继承
团队开发之绩效考核二
站立会议
团队站立会议
团队开发站立会议
原文地址:https://www.cnblogs.com/focus/p/917558.html
最新文章
页面可见性-浏览器选项卡失焦-HTML5-visibilitychange
jQuery实现的打字机效果
js格式化json数据 + json着色(json美化)
$.unique() 对象组成的数组去掉重复对象
单行自动向上滚动的新闻列表
冲刺3-每日个人任务
冲刺-3 每日个人任务
个人任务6
每日个人任务5
每日个人任务4
热门文章
每日个人任务
每日个人任务
冲刺二---个人任务
Spring--个人计划
NABC个人想法
HTML 中注释<a>标签
office 2010 中查找中文字以及中文字符,并显示出来
myeclipse10 破解 激活
bp神经网络及matlab实现
eclipse项目红色叹号解决方法 eclipse导入jar包
Copyright © 2011-2022 走看看