IE & column collapsion

[Reaktor]

Hi everyone,I'm trying to create script which collapses table columns when user clicks <th> tag. I have managed to get this to work with Opera and Mozilla, but have had little luck with IE. Only thing I managed to to was that I was able to HIDE column, but I haven't found way to actually collapse column (in way that the table becomes smaller as user drops columns).Basically the page is an datasheet of SQL-query, which returns ~50 columns. User can then drop away all the columns he/she wants to be hidden when printing (since it's impossible to fit all ~50 columns to one A3/A4). The script I have for FF/Opera works well for those browsers and drops columns from both screen and print.Is there any legit way(or even hack) available to do this on IE?

[aspnetguy]

Hi everyone,I'm trying to create script which collapses table columns when user clicks <th> tag. I have managed to get this to work with Opera and Mozilla, but have had little luck with IE. Only thing I managed to to was that I was able to HIDE column, but I haven't found way to actually collapse column (in way that the table becomes smaller as user drops columns).Basically the page is an datasheet of SQL-query, which returns ~50 columns. User can then drop away all the columns he/she wants to be hidden when printing (since it's impossible to fit all ~50 columns to one A3/A4). The script I have for FF/Opera works well for those browsers and drops columns from both screen and print.Is there any legit way(or even hack) available to do this on IE?

Of course there is , please post your code, it probably just needs some small tweaks.

[Reaktor]

Certainly! I can't remember where I found this script, but it worked quite fine for FF/Opera:

<script type="text/javascript">function ChangeColumnVisibility(strVisibility, intColumnNumber) {	if(navigator.product == "Gecko" && navigator.productSub && navigator.productSub > "20041010" && (navigator.userAgent.indexOf("rv:1.8") != -1 || navigator.userAgent.indexOf("rv:1.9") != -1))	// Mozilla 1.8alpha; see bug 76497 and bug 242368; must be higher than 1.7.x	{		var ColumnCollection = document.getElementById("idtable").getElementsByTagName("col");		ColumnCollection[intColumnNumber].style.visibility = strVisibility;	}	else if(document.all && !window.opera && document.compatMode && document.compatMode == "CSS1Compat")	{		var ColumnCollection = document.getElementById("idtable").getElementsByTagName("col");		if(strVisibility == "visible") {			ColumnCollection[intColumnNumber].style.display = "block";		}		else if(strVisibility == "collapse") {			ColumnCollection[intColumnNumber].style.display = "none";		};	}	else if(document.addEventListener) { // Mozilla and Opera 7.x		var TDCollection = document.getElementById("idtable").getElementsByTagName("td");		for(var CellIterator = intColumnNumber; CellIterator < TDCollection.length; CellIterator += document.getElementById("idtable").rows.length)			{			if(strVisibility == "visible")				{				TDCollection[CellIterator].style.display = "table-cell";				}			else if(strVisibility == "collapse")				{				TDCollection[CellIterator].style.display = "none";				};			};		};	}function ChangeRowVisibility(strVisibility, intRowIndex){if(navigator.product == "Gecko" && navigator.productSub && navigator.productSub > "20041010" && (navigator.userAgent.indexOf("rv:1.8") != -1 || navigator.userAgent.indexOf("rv:1.9") != -1))/* Mozilla 1.8alpha; see bug 77019 and bug 242368; must be higher than 1.7.xMozilla 1.8a2 supports accordingly dynamic collapsing of rows in both border-collapse modelsbut not 1.7.x versions */{document.getElementById("idtable").rows[intRowIndex].style.visibility = strVisibility;}else if(strVisibility == "visible")	{	if(document.all && document.compatMode && document.compatMode == "CSS1Compat" && !window.opera)		{		document.getElementById("idtable").rows[intRowIndex].style.display = "block";		}	else if(document.getElementById && document.getElementById("idtable").rows)	// Mozilla prior to 1.8a2, Opera 7.x and MSIE 5+		{		document.getElementById("idtable").rows[intRowIndex].style.display = "table-row";		};	}else if(strVisibility == "collapse")	{	document.getElementById("idtable").rows[intRowIndex].style.display = "none";	};}function init(){document.forms[0].reset();}</script>In body :<table> <tr>			<th scope="col"><a onClick="ChangeColumnVisibility('collapse', 0)">Time</a></th></tr></table>

This message could be suitable even for javascript-forum, but I figured out that this relates more to CSS (since one more "else" statement is most this script needs after someone figures out how to collapse columns in IE).I also found this page http://www.quirksmode.org/css/columns.html , which shows the main problem with IE. Columns can be made hidden, but even this page is stating that IE6 doesn't support collapsing... I'm just still hopeful for someone being just clever and figuring out some hack

[Reaktor]

Still no ideas? I'm quite desparate getting this to work.It would do fine if someone made even static page, without javascript, showing how to make collapse-hack for IE with pure CSS & HTML?