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
>
查看全文
相关阅读:
家乡摔跤
mportError: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found
The connection to the server localhost:8080 was refused
docker: error pulling image configuration: Get https://xx net/http: TLS handshake timeout
Error from server (ServiceUnavailable): the server is currently unable to handle the request
Error from server (NotFound): the server could not find the requested resource (get services http:heapster:)
kubernetes1.18.2集群部署
k8s知识2
k8s知识1
Codeforces 922.F Divisibility
原文地址:https://www.cnblogs.com/focus/p/917558.html
最新文章
SSL/TLS 握手优化详解
What is Gensim?
超级有用的15个mysqlbinlog命令
通过微信服务号推送Zabbix告警
strace
Elasticsearch 基础理论 & 配置调优
Elasticsearch之settings和mappings的意义
自动解压vsftpd上传的文件
Metricbeat 的使用
mysql时间函数
热门文章
遍历三维数组
映射与反射
JSP基础
事务
java设计模式
servlet生命周期与工作原理
面试
算法
数据库
解决不能自启动dockerfile tomcat的问题
Copyright © 2011-2022 走看看