<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Hiding/displaying HTML table columns on wide tables

Published on
9,171 Points
6,071 Views
1 Endorsement
Last Modified:
I was recently asked to create an report based on an HTML table. The report needed to contain many more columns than could be displayed across the page, but they would all be needed.
Fortunately, it was possible to group the columns of data into related subjects that would be viewed altogether or not at all.

I needed a simple way of hiding or displaying the groups of columns, that would also indicate that there was a hidden group of columns that was available for display.

My solution looks like the screen shot below.

Column group1 & 3 are both expanded, Group 2 is collapsed, indicated by the narrow blue column.
The 'ID' column is a fixed column that is always present
To expand Group 2, or collapse Group 1 and 3, it is simply necessary to double click in one of the header cells

 Screenshot of tableWhen the head cell of a column is double clicked (either an expanded or collapsed column) the following Javascript function is called.

 
    // This value is updated when the document is loaded is inline-table style is not supported
    var showStyle = "inline-table";
    function expcoll(cell) {
        var className = cell.className;
        var classType = className.substr(0, 2);
        var classID = className.substr(2); 
        var ctrlClass = ((classType == "ct") ? "cg" : "ct") + classID;
       
        $("." + className).css("display", "none");
        $("." + ctrlClass).css("display", showStyle);
    }
    function cssTest() {
        // inline-table doesn't work properly in IE8 (and presumably older versions)
        // The data columns get hidden, but the control columns don't appear.
        // I suspect this style is not recognised at all, and is ignored when it is seen in the default style sheet
        // Just using 'inline' breaks the table in Firefox and Opera -
        // the cell widths shrink to the minimum size required to show the contents
        
        // If inline-table is not supported (as with IE) the initial style is 'block', so use 'inline' instead of 'inline-table'
        if ($("#testCell").css("display") == "block") showStyle = "inline";
    }

Open in new window


This function parses the CSS class name of the cell that has been double-clicked. All the cells in the column need the same class name. The first two letters of the class name indicate the column type - 'cg' is a column group, 'ct' is a control column (displayed when the other columns are hidden). Whatever letters you choose, use the same number of letters for each type, as this simplifies parsing the name.
The rest of the class name is the column group number. So, each group will have a number of columns with a class cg1 (for example) and one control column ct1

The function uses JQuery to get a reference to all the cells with the selected class name, and hides them. It then gets a reference to all the columns with the other class name (cg or ct) and makes them visible.

IE does not seem to support 'inline-table' as an option for the 'display' style. Rather than clumsy user-agent parsing to detect support, I've developed a way of detecting CSS support. See my related tutorial Detecting cross browser CSS style support

You will need to download JQuery  to make it work.
(JQuery is a JavaScript library; it is "... a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.")

Complete solution:

 
<html>
<head>
	<style type="text/css">
	table td
	{
	    border:solid 1px black; 
	    border-collapse:collapse;
	    padding: 1px;
	}
	.cc1 {
		width:150px;
		background-color:LightBlue;
		display:inline-table;
	}	
	.cg1 {
		width:150px;
		background-color:LightGreen;
		display:inline-table;
	}	
	.cg2 {
		width:150px;
		background-color:LightSkyBlue;
		display:inline-table;
	}	
	.cg3 {
		width:150px;
		background-color:LightSeaGreen;
		display:inline-table;
	}	
	.ct1 {
		width:10px;
		display:none;
		background-color:LightGreen;
	}
	.ct2 {
		width:10px;
		display:none;
		background-color:LightSkyBlue;
	}
	.ct3 {
		width:10px;
		display:none;
		background-color:LightSeaGreen;
	}
	
</style>
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    // This value is updated when the document is loaded is inline-table style is not supported
    var showStyle = "inline-table";
    function expcoll(cell) {
        var className = cell.className;
        var classType = className.substr(0, 2);
        var classID = className.substr(2); 
        var ctrlClass = ((classType == "ct") ? "cg" : "ct") + classID;
       
        $("." + className).css("display", "none");
        $("." + ctrlClass).css("display", showStyle);
    }
    function cssTest() {
        // inline-table doesn't work properly in IE8 (and presumably older versions)
        // The data columns get hidden, but the control columns don't appear.
        // I suspect this style is not recognised at all, and is ignored when it is seen in the default style sheet
        // Just using 'inline' breaks the table in Firefox and Opera -
        // the cell widths shrink to the minimum size required to show the contents
        
        // If inline-table is not supported (as with IE) the initial style is 'block', so use 'inline' instead of 'inline-table'
        if ($("#testCell").css("display") == "block") showStyle = "inline";
    } 
</script>
	
</head>	
<body onload="cssTest()">
	
	<table>
		<tr>
			<td class="cc1">ID</td>
			<td class="cg1" ondblclick="expcoll(this)" id="testCell">Group 1</td>
			<td class="cg1" ondblclick="expcoll(this)">Group 1</td>
			<td class="ct1" ondblclick="expcoll(this)">&nbsp;</td>
			<td class="cg2" ondblclick="expcoll(this)">Group 2</td>
			<td class="cg2" ondblclick="expcoll(this)">Group 2</td>
			<td class="ct2" ondblclick="expcoll(this)">&nbsp;</td>
			<td class="cg3" ondblclick="expcoll(this)">Group 3</td>
			<td class="cg3" ondblclick="expcoll(this)">Group 3</td>
			<td class="ct3" ondblclick="expcoll(this)">&nbsp;</td>
		</tr>
		<tr>
			<td class="cc1">Row 1</td>
			<td class="cg1">Row 1</td>
			<td class="cg1">Row 1</td>
			<td class="ct1">&nbsp;</td>
			<td class="cg2">Row 1</td>
			<td class="cg2">Row 1</td>
			<td class="ct2">&nbsp;</td>
			<td class="cg3">Row 1</td>
			<td class="cg3">Row 1</td>
			<td class="ct3">&nbsp;</td>				
		</tr>
		<tr>
			<td class="cc1">Row 2</td>
			<td class="cg1">Row 2</td>
			<td class="cg1">Row 2</td>
			<td class="ct1">&nbsp;</td>
			<td class="cg2">Row 2</td>
			<td class="cg2">Row 2</td>
			<td class="ct2">&nbsp;</td>
			<td class="cg3">Row 2</td>
			<td class="cg3">Row 2</td>
			<td class="ct3">&nbsp;</td>				
		</tr>
		<tr>
			<td class="cc1">Row 3</td>
			<td class="cg1">Row 3</td>
			<td class="cg1">Row 3</td>
			<td class="ct1">&nbsp;</td>
			<td class="cg2">Row 3</td>
			<td class="cg2">Row 3</td>
			<td class="ct2">&nbsp;</td>
			<td class="cg3">Row 3</td>
			<td class="cg3">Row 3</td>
			<td class="ct3">&nbsp;</td>				
		</tr>
	</table>
 
</body>
</html>

Open in new window

1
Comment
Author:Adam
0 Comments

Featured Post

CompTIA Security+

Learn the essential functions of CompTIA Security+, which establishes the core knowledge required of any cybersecurity role and leads professionals into intermediate-level cybersecurity jobs.

Join & Write a Comment

Suggested Articles

The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Other articles by this author

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month