<

Hiding/displaying HTML table columns on wide tables

Published on
8,953 Points
5,853 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

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

Join & Write a Comment

Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Other articles by this author

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month