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
>
查看全文
相关阅读:
docker6 管理工具
docker1 初识docker
libsvm处理多分类的问题
selenium webdriver 的三种等待方式
文本深度表示模型Word2Vec
机器学习中训练集、验证集、测试集的定义和作用
机器学习中防止过拟合的处理方法
用Python读取大文件
进化世界
EDS(实例)
原文地址:https://www.cnblogs.com/focus/p/917558.html
最新文章
基于jQuery的弹出层功能
JS 面向对象之继承多种组合继承
基于jQuery的模仿下拉框的插件
结队2.0(复利计算)
单元测试
0302软件工程作业
命令解释程序的编写实验
C语言文法
结队2.0
词法分析
热门文章
自动机
操作系统实验0 了解和熟悉操作系统
saltstack的数据系统Grains & Pillar
SaltStack快速入门
python装饰器
docker3 基础命令
docker5 docker仓库
docker2 深入了解docker
docker7 docker在阿里云的使用
docker4 Dockerfile的使用
Copyright © 2011-2022 走看看