Collapsing table columns

[RIRedinPA]

I am trying to write a script where the client can collapse selected table columns. It works to a degree but I have one issue with it - columns collapse up to the point where text is present in the cell, then they no stop. The table is built with PHP and I suspect what I am having here is a css issue, since the JS is working. Here's the relevant snippets of code:

 

Style sheet:

 

td { 
width: 150px;
padding: 3px;
font-family: arial, helvetica, sans-serif;
font-size: .8em;
font-style: normal;
color: #333;
overflow: hidden;
white-space: nowrap
}

 

JS

 

function shrinkcol(thiscol) {
//get offset width
var currentwidth = document.getElementById(thiscol).offsetWidth;
alert(currentwidth);
//get col number
var coldataarray = thiscol.split("_");
var colnum = coldataarray[3];

//toggle columns
if (currentwidth >= 154) { 
	document.getElementById(thiscol).style.width = "25px";
} else {
	document.getElementById(thiscol).style.width = "150px";
}
}

 

PHP table build. Not sure how relevant this is to the problem. What is going on here is I am allowing users to create custom mysql tables for a workflow display. There are two tables being built, etable and atable. Both tables have a default base of fields and then whatever the user added.

 

<?php 


//start with the base which = the default cols x 150 = 6 px padding each col (3px each side)
$etablewidth = 624; //4x150 + 4x6
$atablewidth = 1248;//8x150 + 8x6

//get fields
$query = "SHOW COLUMNS FROM " . $tablename;
$result = mysql_query($query); 
if (mysql_num_rows($result) > 0) {
	//loop through the results
    		while ($row = mysql_fetch_assoc($result)) {
		//get the schema items
       		foreach($row as $key => $value) {
			//if it is a field
			if ($key == "Field") { 
				//see if name includes an underscore, which indiciates a custom field
				$fieldarray = explode("_", $value);
				if (count($fieldarray) == 3) { 
					//determine if we are adding to the etable or atable
					if ($fieldarray[1] == "e") {
						$etablewidth = $etablewidth + 156; 
					} else { 
						$atablewidth = $atablewidth + 156; 
					}
				}
			} 
		}
	}
}

//echo $etablewidth; 
$etabletdwidth =(100 / $etablewidth) * 156;
$atabletdwidth =(100 / $atablewidth) * 156 ;  

//build tables headers
$etable = "<div id=\"etableheadr\" style=\" width:" . $etablewidth . "px; display: block;\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"1\" width=\"" . $etablewidth . "\"><tr valign=\"top\" style=\"background-color: #778899;\">";
$atable = "<div id=\"atableheadr\" style=\" width:" . $atablewidth . "px; display: none;\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"1\" width=\"" . $atablewidth . "\"><tr valign=\"top\" style=\"background-color: #778899;\">";

$query = "SHOW COLUMNS FROM " . $tablename;
$result = mysql_query($query); 
if (mysql_num_rows($result) > 0) {
	$i = -1; 
    		while ($row = mysql_fetch_assoc($result)) {
		$i++;
       		foreach($row as $key => $value) { 
			if ($key == "Field") { 
				//check to see if it is a custom field
				$fieldarray = explode("_", $value);
				if (count($fieldarray) == 3) { 
					if ($fieldarray[1] == "e") { 
						$etable .= "<td id=\"td_e_col_ " . $i . "\" align=\"center\" style=\"overflow: hidden;\">" . $fieldarray[0] . " <a href=\"javascript:void(0);\" onmousedown=\"shrinkcol('td_e_col_ " . $i . "');\" style=\"position: relative; top: -10px;  float:right; width: 12%; height: 0px; \"><img src=\"images/shrinkcol.gif\" border=\"0\" width=\"20\"></a></td>";
						//add item to field array
						$editfields[] = $value; 
					} else { 
						$atable .= " <td id=\"td_a_col_" . $i  . "\" align=\"center\" style=\"overflow: hidden;\">" . $fieldarray[0] . " <a href=\"javascript:void(0);\" onmousedown=\"shrinkcol('td_e_col_ " . $i . "');\" style=\"position: relative; top: -10px;  float:right; width: 12%; height: 0px; \"><img src=\"images/shrinkcol.gif\" border=\"0\" width=\"20\"></a></td>";
						//add item to field array
						$artfield[] = $value; 
					}
				} else { 
					//loop through default fields 
					for($e=0; $e<count($editfields); $e++) {
						if ($value == $editfields[$e]) {
							$etable .= "<td id=\"td_e_col_ " . $i . "\" align=\"center\" style=\"overflow: hidden;\">" . $value . " <a href=\"javascript:void(0);\" onmousedown=\"shrinkcol('td_e_col_ " . $i . "');\" style=\"position: relative; top: -10px;  float:right; width: 12%; height: 0px; \"><img src=\"images/shrinkcol.gif\" border=\"0\" width=\"20\"></a></td>";
						} 
					}

					for($a=0; $a<count($artfields); $a++) { 
						if ($value == $artfields[$a]) {
							$atable .= "<td id=\"td_a_col_ " . $i . "\" align=\"center\" style=\"overflow: hidden;\">" . $value . " <a href=\"javascript:void(0);\" onmousedown=\"shrinkcol('td_e_col_ " . $i . "');\" style=\"position: relative; top: -10px;  float:right; width: 12%; height: 0px; \"><img src=\"images/shrinkcol.gif\" border=\"0\" width=\"20\"></a></td>";
						} 
					}
				}//end fieldarray count check
			}//end $key check for field
    			}//end loop through rows
	}//end while loop
}//end itemcount check


$etable .= "</tr></table></div>";
$atable .= "</tr></table></div>";

?>

[Ken2k7]

The way I see it, it just shrinks a cell, not even a column.

[RIRedinPA]

your right, I was just testing it out on one cell for now.

[Ken2k7]

Do you have this up live for me to check out?

[RIRedinPA]

I'm on a intranet. I can post it later this evening from home though.