复制代码代码如下:
<%@ halaman bahasa = "java" contentType = "text/html; charset = utf-8"
pageEncoding = "UTF-8"%>
<! Doctype html public "-// w3c // dtd html 4.01 transisi // en" "http://www.w3.org/tr/html4/loose.dtd">
<Html>
<head>
<title> </title>
<script>
/**
* @param otarget 需要加载 gulir 的 dom 对象
* @param fnhandler 处理的回调函数
*/
Function EventHandler (Otarget, fnHandler) {
if (otarget.addeventListener) {
Otarget.addeventListener ("gulir", fnhandler, false);
} lain jika (otarget.attachevent) {
Otarget.AttachEvent ("Onscroll", FnHandler);
} kalau tidak {
Otarget ["onscroll"] = fnhandler;
}
};
fungsi oo (divContentId, divheaderid) {
var div = document.getElementById (divContentId);
var left = div.scrollleft;
var divheader = document.geteLementById (divheaderId);
divheader.scrollleft = kiri;
var diswidth = div.children [0] .style.width.replace ("px", "")
- Div.Style.width.replace ("px", "");
if (div.scrollleft> = diswidth) {
divheader.style.overflowy = 'gulir';
} kalau tidak {
divheader.style.overflowy = 'tersembunyi';
}
}
window.onload = function onstartlock () {
var odiv = document.getElementById ("divContentId");
EventHandler (ODIV, function () {
oo ("divcontentid", "divheaderid");
});
};
</script>
</head>
<body>
<Div id = "Div1all"
style = "Posisi: absolute; kiri: 0px; kanan: 0px; atas: 0px; bawah: 0px">
<div id = "divheaderid"
style = "margin-right: auto; margin-left: auto; overflow: hidden;">
<tabel cellspacing = "0"
style = "Border-Collapse: Collapse; font-size: 15px"
bordercolor = "#c1dad7" cellpadding = "0" bgcolor = "#f5fffa"
width = "600px">
<Tr style = "latar belakang: navy; warna: putih; tinggi: 30px">
<t th> header a </th>
<TH> header b </t>
<th> header c </t>
<th> header d </t>
<th> header e </t>
<t th> header f </tom>
</tr>
</boable>
</div>
<Div id = "DivContentId"
style = "Posisi: absolute; kiri: 0px; atas: 30.5px; bawah: 0px; kanan: 0px; overflow: gulir">
<tabel cellspacing = "0"
style = "Border-Collapse: Collapse; font-size: 15px"
bordercolor = "#c1dad7" cellpadding = "0" bgcolor = "#f5fffa"
width = "600px">
<tr>
<td> a </td>
<td> b </td>
<td> c </td>
<td> d </td>
<td> e </td>
<td> f </td>
</tr>
<tr>
<td> a </td>
<td> b </td>
<td> c </td>
<td> d </td>
<td> e </td>
<td> f </td>
</tr>
<tr>
<td> a </td>
<td> b </td>
<td> c </td>
<td> d </td>
<td> e </td>
<td> f </td>
</tr>
<tr>
<td> a </td>
<td> b </td>
<td> c </td>
<td> d </td>
<td> e </td>
<td> f </td>
</tr>
<tr>
<td> a </td>
<td> b </td>
<td> c </td>
<td> d </td>
<td> e </td>
<td> f </td>
</tr>
</boable>
</div>
</div>
</body>
</html>