Resizing HTML Table Columns

Hi,

I found a piece of code online for resizing HTML table columns. With a little bit of changes, I was able to modify the code to suit my need. The issue is that, the functionality works fine in IE, but in FireFox, only the HTML table head gets resized and not the entire column. Could anyone help me figure out what could be causing this issue?

Note: Uncomment the line "obRight = ob.nextElementSibling;" for Firefox and comment out "obRight = ob.nextSibling;". Vice-Versa in IE.

/* TODO: expand column completely on double click */

<html>
<head>
      <style type="text/css">
         /* if mozilla */
         html>body div.scrollable tbody {
            overflow: auto;
         }
 
         table.resizable th{
            text-align:center;
            overflow: hidden;
         }
 
         /* if mozilla, add 10 for the scrollbar */
         html>body th.scrollbarCol {
            width:10px;
         }
 
         table.resizable td{
            overflow: hidden;
         }
 
         table.resizable{
            table-layout:fixed;
         }
 
         table.resizable input{
            width:100%;
         }
 
         table.resizable textarea{
            width:100%;
         }
 
         .nowrap {
             white-space:nowrap;
         }
 
         /* needed for IE */
         table.tabular th.scrollbarCol {
            background-color:transparent; 
         }
 
         table.tabular {
            FONT-SIZE: 13px;
            FONT-FAMILY: 'Verdana, Arial, Helvetica, sans-serif';
            COLOR: #336699;
         }
 
         table.tabular thead {
             COLOR: #ffffff;
             FONT-WEIGHT: bold;
         }
 
         table.tabular th{
            background-color:#c0c0c0; 
            padding: 4px;
         }
 
         table.tabular td {
            background-color:#EAF4F3;
            padding: 2px;
         }
      </style>
<SCRIPT LANGUAGE="JavaScript">

var ob;
var obLeft;
var obRight;
var over = false;
var iEdgeThreshold = 10;
 
function findPos(obj) {
  var curleft = curtop = 0;
  if (obj.offsetParent) {
      curleft = obj.offsetLeft;
      curtop = obj.offsetTop;
      while (obj = obj.offsetParent) {
         curleft += obj.offsetLeft;
         curtop += obj.offsetTop;
      }
   }
   return [curleft,curtop];
}
 
/* Function that tells me if on the border or not */
function isOnBorderRight(objTable,objTh,event){
  var width = objTh.offsetWidth;
  var left = objTh.offsetLeft;
  var pos = findPos(objTable);
  var absRight = pos[0] + left + width;
 
  if( event.clientX > (absRight - iEdgeThreshold) ){
      return true;
  }
 
  return false;
}
 
function getNodeName(objReference,nodeName){
   var oElement = objReference;
   while (oElement != null && oElement.tagName != null && oElement.tagName != "BODY") {
      if (oElement.tagName.toUpperCase() == nodeName) {
         return oElement;
      }
      oElement = oElement.parentNode;
   }
   return null;
}
 
function doResize(objTh,event){
    if(!event) event = window.event;
    var objTable = getNodeName(objTh,"TABLE");
    if( isOnBorderRight(objTable,objTh,event)){ 
       over=true;
       objTh.style.cursor="e-resize";
    }
    else{
       over=false;
       objTh.style.cursor="";
    }
    return over;
}
 
function doneResizing(){
   over=false;
}
 
function MD(event) {
   if(!event) event = window.event;
 
   MOUSTSTART_X=event.clientX;
   MOUSTSTART_Y=event.clientY;
 
   if (over){      
       if(event.srcElement)ob = event.srcElement;
       else if(event.target)ob = event.target;
       else return;
 
       ob = getNodeName(ob,"TH");
       if(ob == null) return;
       //ob2 = getNodeName(ob,"TABLE");
       //obLeft = ob.previousSibling;
       obRight = ob.nextSibling;
       //obLeft = ob.previousElementSibling; 
       //obRight = ob.nextElementSibling;  // Uncomment For FF
       obwidth=parseInt(ob.style.width);
       if (obLeft != null)
       obLeftWidth=parseInt(obLeft.style.width);
       if (obRight != null)
       obRightWidth=parseInt(obRight.style.width);
       //obwidth2=parseInt(ob2.offsetWidth);
   }        
}
 
function MM(event) {
    if(!event) event = window.event;
 
    if (ob) {
        st=event.clientX-MOUSTSTART_X+obwidth;
        //st2=event.clientX-MOUSTSTART_X+obwidth2;
        document.getElementById("infoDiv").innerHTML = "st=" + st + " clientX=" + event.clientX + " moustart_x=" + MOUSTSTART_X + " obwidth=" + obwidth;
        //document.getElementById("infoDiv").innerHTML += ;
        //document.getElementById("infoDiv").innerHTML += ;
        //document.getElementById("infoDiv").innerHTML += obwidth;
 
        if(st>=10){
            ob.style.width=st;
            //ob2.style.width=st2;
            //obLeft.style.width=st-obLeftWidth;
            obRight.style.width=(parseInt(obwidth - st + obRightWidth) > 10 ? (obwidth - st + obRightWidth) : iEdgeThreshold + "px") ;
        }
        if(document.selection) document.selection.empty();
        else if(window.getSelection)window.getSelection().removeAllRanges();
    }
}
 
function MU(event) {
    if(!event) event = window.event;
    if(ob){
        if(document.selection) document.selection.empty();
        else if(window.getSelection)window.getSelection().removeAllRanges();
        ob = null;
    }
}
 
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
</script>

</head> 
<BODY>

<H1>RESIZABLE TABLE COLUMN</H1>
 
<div class="scrollable" >
<TABLE  id="mytable" style="width:100%; table-layout:fixed" class="sortable resizable tabular">
 
<THEAD>
 
<TR>
 
<TH onmousemove="doResize(this,event)"  onmouseover="doResize(this,event)" onmouseout='doneResizing()' style='width:60px'>Index</TH>
 
<TH onmousemove="doResize(this,event)"  onmouseover="doResize(this,event)" onmouseout='doneResizing()' style='width:170px'><span class="nowrap">Parameter Name</span></TH>
 
<TH onmousemove="doResize(this,event)"  onmouseover="doResize(this,event)" onmouseout='doneResizing()' style='width:170px'><span class="nowrap">Parameter Value</span></TH>
 
<TH onmousemove="doResize(this,event)"  onmouseover="doResize(this,event)" onmouseout='doneResizing()' style='width:110px'><span class="nowrap">Page Name</span></TH>
 
<TH class="sorttable_nosort scrollbarCol"></TH>
 
</TR>
</THEAD> 
<TBODY style="height:200px">
<TR>
 
<TD>0</TD>
 
<TD>1_2</TD>
 
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
 
<TD>1_3</TD>
 
</TR>
 
<TR>
 
<TD>0</TD>
 
<TD>1_2</TD>
 
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
 
<TD>1_3</TD>
 
</TR>
 
<TR>
 
<TD>0</TD>
 
<TD>1_2</TD>
 
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
 
<TD>1_3</TD>
 
</TR>
<TR>
 
<TD>0</TD>
 
<TD>1_2</TD>
 
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
 
<TD>1_3</TD>
 
</TR>
<TR>
 
<TD>0</TD>
 
<TD>1_2</TD>
 
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
 
<TD>1_3</TD>
 
</TR>
<TR>
 
<TD>0</TD>
 
<TD>1_2</TD>
 
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
 
<TD>1_3</TD>
 
</TR>
<TR>
 
<TD>0</TD>
 
<TD>1_2</TD>
 
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
 
<TD>1_3</TD>
 
</TR>
<TR>
 
<TD>0</TD>
 
<TD>1_2</TD>
 
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
 
<TD>1_3</TD>
 
</TR>
 
<TR>
 
<TD>1</TD>
 
<TD><span class="nowrap">this is a very long paramter name</span></TD> 
 
<TD>2_2</TD>
 
 
<TD>2_3</TD>
 
 
</TR>
 
 
<TR>
 
<TD>3_0</TD>
<TD>3_2</TD>
 
<TD><textarea> 
this is a test of
this is a test of
</textarea></TD>
 
<TD>3_3</TD>
 
 
</TR>
 
 
<TR>
 
<TD>4_0</TD>
 
 
<TD>4_1</TD>
 
 
<TD>4_2</TD>
 
<TD>4_3</TD>
 
</TR>
 
</TBODY>
</table>
</div>
<span id="infoDiv"></span>
</body>
</html>

Thanks
Naveen

I tried your code after uncommenting
and commenting
and nothing is happening in my Firefox on moving the mouse over the table headings. Whatever you are trying to do can be done easily (with no need to change the code according to browsers) using jQuery or any other such javascript libraries...

Hi Ankit,

Thanks for the reply. I managed to find a solution to the problem. It looks like Firefox doesn't recognize the overflow:hidden property on either of TD or TH tags (or maybe ignores it). The workaround would be to enclose the contents of the td or the th within a div and then apply the overflow:hidden property to it. That seems to do the trick.

Also, I found a webpage that has a demo and a script to perform table resizing. It works fine in IE and FF.

http://bz.var.ru/comp/web/resizable.html

Thanks
Naveen