Javascript
function scrollX() {
	document.all.mainTable.scrollLeft = document.all.bottomLine.scrollLeft;
	document.all.topTable.scrollLeft = document.all.bottomLine.scrollLeft;
}

function scrollY() {
	document.all.leftTable.scrollTop = document.all.mainTable.scrollTop;
	document.all.mainTable.scrollTop = document.all.leftTable.scrollTop;
}
Body
<table style="table-layout:Fixed;width:100%;">
		<colgroup>
			<col style="width:200px;height:30px;vertical-align:top;">
			<col style="vertical-align:top;">
		</colgroup>
		<tbody><tr>
			<td>
				<table border="1" bordercolor="red" width="100%">
					<tbody><tr>
						<td>1번테이블</td>
						<td>1번테이블</td>
					</tr>
				</tbody></table>
			</td>
			<td>
				<div id="topTable" style="overflow:hidden;width:100%;">
					<table border="1" bordercolor="green" width="120%" style="table-layout:Fixed;">
						<tbody><tr>
							<td>2번테이블</td>
							<td>2번테이블</td>
							<td>2번테이블</td>
							<td>2번테이블</td>
							<td>2번테이블</td>
							<td>2번테이블</td>
							<td>2번테이블</td>
							<td>2번테이블</td>
							<td>2번테이블</td>
							<td>2번테이블</td>
							<td style="width:15px;"></td><!--스크롤크기-->
						</tr>
					</tbody></table>
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<div id="leftTable" style="overflow:hidden;height:200px;" onscroll="scrollY()">
					<table border="1" bordercolor="blue" width="100%">
						<tbody><tr>
							<td>3번테이블</td>
							<td>3번테이블</td>
						</tr>
						<tr>
							<td>3번테이블</td>
							<td>3번테이블</td>
						</tr>
						<tr>
							<td>3번테이블</td>
							<td>3번테이블</td>
						</tr>
						<tr>
							<td>3번테이블</td>
							<td>3번테이블</td>
						</tr>
						<tr>
							<td>3번테이블</td>
							<td>3번테이블</td>
						</tr>
						<tr>
							<td>3번테이블</td>
							<td>3번테이블</td>
						</tr>
						<tr>
							<td>3번테이블</td>
							<td>3번테이블</td>
						</tr>
						<tr>
							<td>3번테이블</td>
							<td>3번테이블</td>
						</tr>
						<tr>
							<td>3번테이블</td>
							<td>3번테이블</td>
						</tr>
						<tr>
						</tr><tr>
							<td>3번테이블</td>
							<td>3번테이블</td>
						</tr>
						<tr>
							<td>3번테이블</td>
							<td>3번테이블</td>
						</tr>
						<tr>
							<td>3번테이블</td>
							<td>3번테이블</td>
						</tr>
					</tbody></table>
				</div>
			</td>
			<td>
				<div id="mainTable" style="overflow-y:scroll;overflow-x:hidden;width:100%;height:200px;" onscroll="scrollY()">
					<table border="1" bordercolor="orange" style="table-layout:Fixed;width:120%;">
						<tbody><tr>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
						</tr>
						<tr>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
						</tr>
						<tr>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
						</tr>
						<tr>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
						</tr>
						<tr>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
						</tr>
						<tr>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
						</tr>
						<tr>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
						</tr>
						<tr>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
						</tr>
						<tr>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
						</tr>
						<tr>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
						</tr>
						<tr>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
						</tr>
						<tr>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
							<td nowrap="">4번테이블</td>
						</tr>
					</tbody></table>
				</div>
			</td>
		</tr>
		<tr>
			<td></td>
			<td>
				<div id="bottomLine" style="height:16px;width:100%;overflow-x:scroll;overflow-y:hidden;" onscroll="scrollX()">
					<table width="120%">
						<tbody><tr>
							<td height="0"> </td>
						</tr>
					</tbody></table>
				</div>
			</td>
		</tr>
	</tbody>
</table>
설명

화면에 크기에 맞게 가로 세로 스크롤 생기게 하는 Html/자바스크립트 소스랍니다.

내용이 화면보다 너비나 높이가 길어지면 자동으로 가로, 세로 스크롤이 테이블에 생기는 소스입니다.

 

실행
[새창으로 보기] [새창(소스포함)으로 보기]
  • 2016.03.03 18:00

    비밀댓글입니다

  • 보해잎새주 2016.12.16 11:36 신고

    질문이 있습니다! 해당 기능은 overflow-y:scroll 같은걸로 가능하지 않나요?