Using Javascript to resize a column width

jason_kelly · 03-06-2013, 08:57 PM

Hello,

I need the help of an expert on this forum,

how can some javascript coding be written such that when I position my mouse over any of the table header column dividers, that 1.) change the cursor to the w-resize; and 2.) when I click and drag to the specified size that I want and the column would then be resized to the specified width?

Code:

<!DOCTYPE html>

<html>

<head>
	<meta charset="utf-8">

<style type="text/css">
#table-css-border-1 {
		width: 100%;
        border-style: outset; 
        border-width: 1px; 
        border-spacing: 2px; 
} 
                         
#table-css-border-1 td, #table-css-border-1 th { 
        border-style: inset; 
        border-width: 1px; 
}
</style>

</head>

<body>

<table id="table-css-border-1">
	<tr>
		<th>header1</th>
		<th>header2</th>
		<th>header3</th>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>

</body>

</html>