테이블 리사이즈 질문입니다.
본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>테이블 리사이즈</title>
<style>
* { font-size:12px; font-family:'돋움', dotum, '굴림', Gulim, Arial, sans-serif; color:#666666; line-height:150%; }
#div_resize { width:100%; height:150px; overflow-x:auto; overflow-y:auto }
#div_resize th { nowrap; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#div_resize td { background:#FFFFFF; nowrap; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center;}
</style>
<script type="text/javascript">
<!--
window.addEventListener("mousemove", function(e){ window.event = e; }, false);
window.addEventListener("mousedown", function(e){ window.event = e; }, false);
window.addEventListener("mouseup", function(e){ window.event = e; }, false);
window.addEventListener("selectstart", function(e){ window.event = e; }, false);
var resizable = false; //리사이즈 가능상태 (마우스가 셀의 우측에 있는 상태)
var mousedown = false; //마우스를 누른 상태
var target_obj = ""; //사이즈 변경할 대상
var target_width; //변경할 대상의 width
var pre_x = 0; //마우스 드레그전 가로위치
document.onmousemove = function(){
try{
var now_object = (event.target) ? event.target : event.srcElement;
if(!mousedown && now_object.className=="colresize" && now_object.tagName.toUpperCase()=="TH"){
var offsetX ;
if(event.offsetX) {
offsetX = event.offsetX ;
} else {
var offset = 0;
var obj = now_object;
while(obj.offsetParent) {
offset += obj.offsetLeft;
obj = obj.offsetParent;
}
offsetX = event.pageX - offset;
}
if (offsetX > now_object.width-4) {
now_object.style.cursor = "col-resize";
resizable = true;
} else {
now_object.style.cursor = "";
resizable = false;
}
} else {
resizable = false;
}
if (mousedown){
var distX = ((event.pageX) ? event.pageX : event.x) - pre_x; //이동한 간격
if (target_obj.width > 5 || distX > 0) {
target_obj.width = parseInt(target_width) + parseInt(distX);
}
}
}catch(e){ return true; }
}
document.onmousedown = function(){
try{
var now_object = (event.target) ? event.target : event.srcElement;
if(resizable) {
mousedown = true;
target_obj = now_object ;
target_width = now_object.width ;
pre_x = event.clientX;
document.body.style.cursor = "col-resize" ;
}
}catch(e){ return true; }
}
document.onmouseup = function(){
try{
mousedown = false;
target_obj = '';
document.body.style.cursor = "" ;
}catch(e){ return true; }
}
//리사이즈 도중 텍스트 선택 금지 (IE만 적용)
document.onselectstart = function(){
try{
if(mousedown){
return false;
}
}catch(e){ return true; }
}
//-->
</script>
</head>
<body>
<div id="div_resize">
<table width="560" border="0" cellpadding="3" cellspacing="1" bgcolor="#CCCCCC" nowrap style='table-layout:fixed'>
<tr bgcolor="#DDDDDD" align="center" height="25">
<th width="70" class="colresize">번호</th>
<th width="100" class="colresize">제목</th>
<th width="70" class="colresize">이름</th>
<th width="70" class="colresize">소속</th>
<th width="70" class="colresize">날짜</th>
<th width="70" class="colresize">조회</th>
<th width="70" class="colresize">댓글</th>
<th width="70" class="colresize">비고</th>
</tr>
<tr height="27">
<td>101</td>
<td>하하하하하ㅏ하하하하하하ㅏ하하?</td>
<td>홍길동</td>
<td>대한민국</td>
<td>2013-04-15</td>
<td>10</td>
<td>2</td>
<td>비고 비고 비고 비고 비고 비고 비고 비고</td>
</tr>
<tr height="27">
<td>102</td>
<td>호호호호호?호ㅗ호?호ㅗ호?</td>
<td>홍길동2</td>
<td>대한민국2</td>
<td>2013-04-16</td>
<td>11</td>
<td>3</td>
<td>비고비고비고비고비고비고비고비고</td>
</tr>
</table>
</div>
</body>
</html>
----------------------------------------------------------
php서버 환경,확장자php에서 작동을 하지 않는데
이유가 뭘까요?
