re-size table

**yngwie** · 08-26-2010, 10:47 AM

Hello averyone. I need your help. I try to make the resize table like this

Code:

<html>
<head>
	<style>
		.tableview{
			border-collapse: collapse;
		}
		
		.cellview{
			border: 1px solid rgb(0,0,0);
		}
		.cellview-inner{
			height: 34px;
		}
		.kix-boxview{
			left: px;
			top: 9px;
		}
		.boxview-content{
			width: 141px;
			padding: 7px;
		}
		.lineview{
			height: 20px;
			direction: ltr;
			text-align: left;
		}
		.lineview-content{
			margin-left: 0px;
			padding-top: 0px;
		}
		.lineview-content SPAN{
			font-size: 11pt;
			font-family: Arial;
			color: rgb(0,0,0);
			background-color: transparent;
			font-weight: normal;
			font-style: normal;
			text-decoration: none;
			vertical-align: baseline;
		}
		div.cDrag div {
		background: repeat scroll 0 0 transparent;
		cursor:col-resize;
		display:block;
		float:left;
		height:24px;
		position:absolute;
		width:5px;
		border: 1px solid rgb(0,0,0);
		}
	</style>
</head>
	<body>
	<div class="cDrag" style="top: 27px;">
		<div style="height: 110px; left: 163px;"></div>
		<div style="height: 110px; left: 321px;"></div>
		<div style="height: 110px; left: 479px;"></div>
	</div>
		<table class="tableview">
			<tbody>
				<tr>
					<td class="cellview">
						<div class="cellview-inner">
							<div class="kix-boxview">
								<div class="boxview-content">
									<div class="lineview">
										<div class="lineview-content">
											<span>текст</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</td>
					<td class="cellview">
						<div class="cellview-inner">
							<div class="kix-boxview">
								<div class="boxview-content">
									<div class="lineview">
										<div class="lineview-content">
											<span>текст</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						</td>
					<td class="cellview">
						<div class="cellview-inner">
							<div class="kix-boxview">
								<div class="boxview-content">
									<div class="lineview">
										<div class="lineview-content">
											<span>текст</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</td>
						<td class="cellview">
							<div class="cellview-inner">
								<div class="kix-boxview">
									<div class="boxview-content">
										<div class="lineview">
											<div class="lineview-content">
												<span>текст</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</td>
				</tr>
					<tr>
						<td class="cellview">
							<div class="cellview-inner">
								<div class="kix-boxview">
									<div class="boxview-content">
										<div class="lineview">
											<div class="lineview-content">
												<span>текст</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</td>
						<td class="cellview">
							<div class="cellview-inner">
								<div class="kix-boxview">
									<div class="boxview-content">
										<div class="lineview">
											<div class="lineview-content">
												<span>текст</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</td>
						<td class="cellview">
							<div class="cellview-inner">
								<div class="kix-boxview">
									<div class="boxview-content">
										<div class="lineview">
											<div class="lineview-content">
												<span>текст</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</td>
						<td class="cellview">
							<div class="cellview-inner">
								<div class="kix-boxview">
									<div class="boxview-content">
										<div class="lineview">
											<div class="lineview-content">
											</div>
										</div>
									</div>
								</div>
							</div>
						</td>
					</tr>
					<tr>
						<td class="cellview">
							<div class="cellview-inner">
								<div class="kix-boxview">
									<div class="boxview-content">
										<div class="lineview">
											<div class="lineview-content">
											</div>
										</div>
									</div>
								</div>
							</div>
						</td>
						<td class="cellview">
							<div class="cellview-inner">
								<div class="kix-boxview">
									<div class="boxview-content">
										<div class="lineview">
											<div class="lineview-content">
												<span>текст</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</td>
							<td class="cellview">
								<div class="cellview-inner">
									<div class="kix-boxview">
										<div class="boxview-content">
											<div class="lineview">
												<div class="lineview-content">	
													<span>текст</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</td>
						<td class="cellview">
							<div class="cellview-inner">
								<div class="kix-boxview">
									<div class="boxview-content">
										<div class="lineview">
											<div class="lineview-content"></div>
										</div>
									</div>
								</div>
							</div>
						</td>
					</tr>
			</tbody>
		</table>
	</body>			
</html>

to resize i used 3 div tags, i need to wtite handler, that will capture the mouse and move it to change the width of the columns in a table.
thx.