DOJEUN's Notepad
 LISTへ 

【Javascript】div タグでフレーム効果を出す

div タグでフレーム効果を出す


<html>
<head><title></title>
<script type="text/javascript">
<!--
function fncScroll(){
	tblTITLE.scrollLeft = tblLIST.scrollLeft;
}
//-->
</script>
</head>
<body>
<div id="tblTITLE" style="width:600px;overflow:hidden">
<table border="0" cellpadding="1" cellspacing="1" style="background:limegreen;">
	<tr style="font-size:10pt;color:black;text-align:center;vertical-align:middle;background:palegreen;">
		<td nowrap style="width:30px">SEQ</td>
		<td nowrap style="width:150px">名前</td>
		<td nowrap style="width:120px">電話番号1</td>
		<td nowrap style="width:120px">電話番号2</td>
		<td nowrap style="width:120px">ファックス番号1</td>
		<td nowrap style="width:120px">ファックス番号2</td>
		<td nowrap style="width:70px">〒</td>
		<td nowrap style="width:500px">住所</td>
	</tr>
</table>
</div>
<div id="tblLIST" onScroll="fncScroll()" style="width:600px;height:200;overflow:scroll">
<table border="0" cellpadding="1" cellspacing="1" style="background:limegreen;">
	<tr style="font-size:10pt;color:black;vertical-align:middle;background:white;">
		<td nowrap style="width:30px">001</td>
		<td nowrap style="width:150px">あああ ああああ</td>
		<td nowrap style="width:120px">111-1111-1111</td>
		<td nowrap style="width:120px">222-2222-2222</td>
		<td nowrap style="width:120px">333-3333-3333</td>
		<td nowrap style="width:120px"></td>
		<td nowrap style="width:70px">123-1234</td>
		<td nowrap style="width:500px">東京都○○○○○○○○○○</td>
	</tr>
	<tr style="font-size:10pt;color:black;vertical-align:middle;background:white;">
		<td nowrap style="width:30px">001</td>
		<td nowrap style="width:150px">いいい いいいいわわわくくく</td>
		<td nowrap style="width:120px">111-1111-1111</td>
		<td nowrap style="width:120px">222-2222-2222</td>
		<td nowrap style="width:120px">333-3333-3333</td>
		<td nowrap style="width:120px"></td>
		<td nowrap style="width:70px">123-1234</td>
		<td nowrap style="width:500px">神奈川県○○○○○○○○○○</td>
	</tr>
</table>
</div>
</body>
</html>