html5 tds显示,resize html table TDs with javascript

I have this html table:

bla		bla		bla
blu		blu		blu
blu		blu		blu

And this is my js script:

var MinSize=0;

var _startPosition = 0;

var _diffPosition = 0;

var _allowMove = false;

var _resizerColumn = null;

var _firstColumn = null;

var _secondColumn = null;

var _resizerColumnLeft = 0;

var _resizerColumnWidth = 0;

var _firstColumnLeft = 0;

var _firstColumnWidth = 0;

var _secondColumnLeft = 0;

var _secondColumnWidth = 0;

var _systemEvent = null;

if (navigator.appName == 'Netscape') {

document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP | Event.ONLOAD);

}

document.onmouseup = disableMouseMovement;

document.onmousemove = setNewPosition;

function setPosition(e) {

// Called for OnMouseDown event

if (navigator.appName == 'Netscape') {

_systemEvent = e;

} else {

_systemEvent = event;

}

_startPosition = _systemEvent.clientX;

_allowMove = true;

_resizerColumnLeft = findPosX(_resizerColumn);

_resizerColumnWidth = _resizerColumn.offsetWidth; //_resizerColumn.style.width;

_firstColumnLeft = findPosX(_firstColumn);

_firstColumnWidth = _firstColumn.offsetWidth; //_firstColumn.style.width;

_secondColumnLeft = findPosX(_secondColumn);

_secondColumnWidth = _secondColumn.offsetWidth; //_secondColumn.style.width;

return true;

}

function setResizeColumns(resizerColumn, firstColumn, secondColumn) {

// Called for OnMouseOver event

// resizerColumn is the actual object of the column that will be moved so that

// firstColumn and secondColumn can be resized.

// firstColumn will have its dimensions either grown or shrunk.

// secondColumn will have the exact opposite done to it that firstColumn has.

// If firstColumn is shrink by 60px, secondColumn is grown by 60px, the opposite also holds true.

resizerColumn=document.getElementById(resizerColumn);

firstColumn=document.getElementById(firstColumn);

secondColumn=document.getElementById(secondColumn);

if (_allowMove == false) {

_resizerColumn = resizerColumn;

_firstColumn = firstColumn;

_secondColumn = secondColumn;

}

return true;

}

function disableMouseMovement(e) {

// Called for OnMouseUp event

_allowMove = false;

return false;

}

function setNewPosition(e) {

// Called for OnMouseMove event

// BEGIN_HACK so that setPosition() can work.

if (navigator.appName == 'Netscape') {

_systemEvent = e;

} else {

_systemEvent = event;

}

// END_HACK

newPosition = _systemEvent.clientX;

if (_allowMove) {

_diffPosition = _startPosition - newPosition;

var tpos1 = (parseInt(_firstColumnWidth) - parseInt(_diffPosition)) ;

var tpos2 = (parseInt(_secondColumnWidth) + parseInt(_diffPosition)) ;

if (tpos1

if ((tpos2tpos1)) return;

if (tpos2<0) tpos2=0;

if (tpos1<0) tpos1=0;

_firstColumn.style.width = tpos1+ "px";

_secondColumn.style.width = tpos2+ "px";

}

return true;

}

function findPosX(obj) {

var curleft = 0;

if (obj.offsetParent){

while (obj.offsetParent){

curleft += obj.offsetLeft

obj = obj.offsetParent;

}

}

else if (obj.x)

curleft += obj.x;

return curleft;

}

function findPosY(obj){

var curtop = 0;

if (obj.offsetParent){

while (obj.offsetParent){

curtop += obj.offsetTop

obj = obj.offsetParent;

}

}

else if (obj.y)

curtop += obj.y;

return curtop;

}

I want to resize

over 100% of the table's width and didnt stop resizing by adding horizental scroll that will not be fixed to 100% of screen

The problem with my code is it fix width to 100% (see demo). is there a solution for that ?