inGray,
вот посмотрите пожалуйста пример покороче
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div.cDrag div {
cursor:col-resize;
display:block;
height:24px;
position:absolute;
width:5px;
border: 1px solid rgb(0,0,0);
}
</style>
<script type="text/javascript">
var inDrag = false;
var splitter = null;
function registerHandler(obj, evntDOM, handler) {
if (obj.addEventListener) {
obj.addEventListener(evntDOM, handler, false);
} else {
obj.attachEvent("on" + evntDOM, handler);
}
}
function getTruthPos(obj) {
var x = 0;
while (obj) {
x += obj.offsetLeft;
obj = obj.offsetParent;
}
return x;
}
function moveSplitters() {
var divs = document.getElementById("splitters").getElementsByTagName("div");
var tds = document.getElementById("resizeTbl").rows[0].cells;
for (var i = 0; i < divs.length; i++) {
divs[i].style.left = (getTruthPos(tds[i]) + tds[i].offsetWidth).toString() + "px";
}
}
function downHandler(e) {
inDrag = true;
splitter = (e.target) ? e.target : e.srcElement;
}
function upHandler(e) {
if (!inDrag) return true;
inDrag = false;
var tdNo = parseInt(splitter.id.match(/_(\d+)/)[1]);
var td = document.getElementById("resizeTbl").rows[0].cells[tdNo];
var tdLeft = getTruthPos(td);
var newWidth = getTruthPos(splitter) - tdLeft;
if (newWidth > 0) {
td.style.width = newWidth.toString() + "px";
}
moveSplitters();
}
function moveHandler(e) {
if (!inDrag) return true;
splitter.style.left = (e.clientX - 2).toString() + "px";
}
function setResizeHandlers(e) {
var divs = document.getElementById("splitters").getElementsByTagName("div");
registerHandler(document, "mouseup", upHandler);
registerHandler(document, "mousemove", moveHandler);
for (var i = 0; i < divs.length; i++) {
registerHandler(divs[i], "mousedown", downHandler);
}
moveSplitters();
}
registerHandler(window, "load", setResizeHandlers);
</script>
</head>
<body>
<div class="cDrag" style="top: 27px;" id="splitters">
<div style="height: 70px; left: 109px;" id="_0"></div>
<div style="height: 70px; left: 212px;" id="_1"></div>
<div style="height: 70px; left: 315px;" id="_2"></div>
<div style="height: 70px; left: 418px;" id="_3"></div>
</div>
<table border="2" rules="all" id="resizeTbl" style=" border-collapse: collapse;" onselectstart="return false"
>
<tr>
<td>_____1.1_____</td>
<td>_____1.2_____</td>
<td>_____1.3_____</td>
<td>_____1.4_____</td>
<td>_____1.5_____</td>
</tr>
<tr>
<td>_____2.1_____</td>
<td>_____2.2_____</td>
<td>_____2.3_____</td>
<td>_____2.4_____</td>
<td>_____2.5_____</td>
</tr>
<tr>
<td>_____3.1_____</td>
<td>_____3.2_____</td>
<td>_____3.3_____</td>
<td>_____3.4_____</td>
<td>_____3.5_____</td>
</tr>
</table>
</body>
</html>
Единственное, что мне нужно сделать так, чтобы при изменении размера столбцов текст, в ячейке переносился по вертикали вниз. Можно ли так сделать?