How to Resize Table Column in Run Time in asp.net
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="resizingtablecolumn.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
h1, h2
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
}
.move
{
width:100%;
background-color:#99CCFF;
border-bottom:1px solid blue;
font-size:14px;
font-family:vardana;
font-color:"#33CCAA";
text-align:center;
}
.info
{
width:100%;
background-color:#99CCFF;
border-top:1px solid blue;
font-size:13px;
font-family:vardana;
font-color:"#33CCAA";
}
.panel2{
width:150; position:absolute; border:1px solid blue; left:500; top:200; font-size:13px; font-family:vardana;}
.panel{
width:150; position:absolute; border:1px solid blue; left:350; top:200; font-size:13px; font-family:vardana;}
.panel a:visited{color:blue;}
.panel a{text-decoration:none;color:blue}
.panel a:hover{text-decoration:none;}
#panel a.visited{
text-decoration:none;
}
.menu
{
width:100%;
background-color:lightyellow;
font-size:13px;
font-family:vardana;
}
</style>
<script type="text/javascript">
function getSize(name) {
op =
document.getElementById(name).style.width;
}
N = (document.all)
? 0 : 1;
var ob;
var over = false;
var over_id = "";
function MD(e) {
MOUSTSTART_X =
event.clientX;
MOUSTSTART_Y =
event.clientY;
if (over) {
if (N) {
ob =
document.getElementById(over_id);
X =
e.layerX;
Y =
e.layerY;
return false;
}
else {
ob =
document.getElementById(over_id);
ob =
ob.style;
ob2 =
document.getElementById("maintbl");
ob2 =
ob2.style;
obwidth
= parseInt(ob.width);
obwidth2 = parseInt(ob2.width);
X =
event.offsetX;
Y =
event.offsetY;
}
}
}
function MM(e) {
if (ob) {
if (N) {
ob.style.top = e.pageY - Y;
ob.style.left = e.pageX - X;
}
else {
st =
event.clientX - MOUSTSTART_X + obwidth;
st2 =
event.clientX - MOUSTSTART_X + obwidth2;
if (st >= 30) {
ob.width = st;
ob2.width = st2;
}
return false;
}
}
}
function MU() {
ob = null;
}
if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE |
Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup
= MU;
</script>
</head>
<body>
<h1>RESIZABLE TABLE COLUMN</h1>
<table border="1" style="width:500px; overflow:hidden" id="maintbl">
<tr>
<th id="pnl0" class='move' onmouseover="over=true;over_id='pnl0'" onmouseout='over=false;'
style='width:110px; cursor:e-resize; overflow:hidden'>Column-1
Data</th>
<th id="pnl1" class='move' onmouseover="over=true;over_id='pnl1'" onmouseout='over=false;'
style='width:110px; cursor:e-resize; overflow:hidden'>Column-2
Data</th>
<th id="pnl2" class='move' onmouseover="over=true;over_id='pnl2'" onmouseout='over=false;'
style='width:110px; cursor:e-resize; overflow:hidden'>Column-3
Data</th>
<th id="pnl3" class='move' onmouseover="over=true;over_id='pnl3'" onmouseout='over=false;'
style='width:110px; cursor:e-resize; overflow:hidden'>Column-4
Data</th>
<th id="pnl4" class='move' onmouseover="over=true;over_id='pnl4'" onmouseout='over=false;'
style='width:110px; cursor:e-resize; overflow:hidden'>Column-5
Data</th>
</tr>
<tr>
<td>cell no.1_0</td>
<td>cell no.1_1</td>
<td>cell no.1_2</td>
<td>cell no.1_3</td>
<td>cell no.1_4</td>
</tr>
<tr>
<td>cell no.2_0</td>
<td>cell no.2_1</td>
<td>cell no.2_2</td>
<td>cell no.2_3</td>
<td>cell no.2_4</td>
</tr>
<tr>
<td>cell no.3_0</td>
<td>cell no.3_1</td>
<td>cell no.3_2</td>
<td>cell no.3_3</td>
<td>cell no.3_4</td>
</tr>
<tr>
<td>cell no.4_0</td>
<td>cell no.4_1</td>
<td>cell no.4_2</td>
<td>cell no.4_3</td>
<td>cell no.4_4</td>
</tr>
</table>
</body>
</html>
