I have this html table:

<table>
    <tr>
        <td id="c0">bla</td>
        <td class="Resizor" id="c01" onmousedown="setPosition(event);" onmouseover="setResizeColumns(&#39;c01&#39;, &#39;c0&#39;, &#39;c1&#39;);">&nbsp;</td>
        <td id="c1">bla</td>
        <td class="Resizor" id="c12" onmousedown="setPosition(event);" onmouseover="setResizeColumns(&#39;c12&#39;, &#39;c1&#39;, &#39;c2&#39;);">&nbsp;</td>
        <td id="c2" >bla</td>
    </tr>
    <tr>
        <td>blu</td>
        <td></td>
        <td>blu</td>
        <td></td>
        <td>blu</td>
    </tr>
    <tr>
        <td>blu</td>
        <td></td>
        <td>blu</td>
        <td></td>
        <td>blu</td>
    </tr>
</table>

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<MinSize) return;
        if ((tpos2<MinSize) && (_firstColumnWidth>tpos1)) 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 <Td> 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 ?

LIVE DEMO

I have this html table:

<table>
    <tr>
        <td id="c0">bla</td>
        <td class="Resizor" id="c01" onmousedown="setPosition(event);" onmouseover="setResizeColumns(&#39;c01&#39;, &#39;c0&#39;, &#39;c1&#39;);">&nbsp;</td>
        <td id="c1">bla</td>
        <td class="Resizor" id="c12" onmousedown="setPosition(event);" onmouseover="setResizeColumns(&#39;c12&#39;, &#39;c1&#39;, &#39;c2&#39;);">&nbsp;</td>
        <td id="c2" >bla</td>
    </tr>
    <tr>
        <td>blu</td>
        <td></td>
        <td>blu</td>
        <td></td>
        <td>blu</td>
    </tr>
    <tr>
        <td>blu</td>
        <td></td>
        <td>blu</td>
        <td></td>
        <td>blu</td>
    </tr>
</table>

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<MinSize) return;
        if ((tpos2<MinSize) && (_firstColumnWidth>tpos1)) 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 <Td> 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 ?

LIVE DEMO

• javascript
• html
• resize

Share Follow asked May 19, 2013 at 10:51 DrwhiteDrwhite 1,69544 gold badges2222 silver badges4444 bronze badges 5

• td's width can not be more than table's width. Its not really clear what you want in this question. – tusharmath Commented May 19, 2013 at 11:05
• if you see the demo, the problem is when I resize a specific column of the table, the next column to the resizable one is affected (will be resized) because the full width of the table is fixed. – Drwhite Commented May 19, 2013 at 11:13
• You are changing the width - _firstColumn.style.width = tpos1+ "px"; _secondColumn.style.width = tpos2+ "px"; – tusharmath Commented May 19, 2013 at 11:19
• You want the table width to dynamically increase? – tusharmath Commented May 19, 2013 at 11:22
• @TusharMathur: yes, the table width should to dynamically increase and there is no prob if passed the 100% – Drwhite Commented May 21, 2013 at 11:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Three changes are required.

1st Change - Pass a parameter determining which col has been selected (removing other information only for clarity)

 <td onmousedown="setPosition(event,1);" />
 <td onmousedown="setPosition(event,2);" />

2nd Change - Save the col which has been selected

function setNewPosition(e,col) {
colSelected = col;
...
}

3rd Change - Change width based on which col has been selected

if(colSelected == 1)
 _firstColumn.style.width = tpos1+ "px";
else if(colSelected == 2)
 _secondColumn.style.width = tpos2+ "px";

UPDATE: Try this instead - _firstColumn.style.width = tpos1+ "px"; //_secondColumn.style.width = tpos2+ "px";

Though I would remend that you check out these questions - Resizable table columns with bz code

Also the following jsFiddle http://jsfiddle/tpqn7/