Browse All Articles > Hiding/displaying HTML table columns on wide tables
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 table]()
When the head cell of a column is double clicked (either an expanded or collapsed column) the following Javascript function is called.
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:
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
When 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";
}
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)"> </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)"> </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)"> </td>
</tr>
<tr>
<td class="cc1">Row 1</td>
<td class="cg1">Row 1</td>
<td class="cg1">Row 1</td>
<td class="ct1"> </td>
<td class="cg2">Row 1</td>
<td class="cg2">Row 1</td>
<td class="ct2"> </td>
<td class="cg3">Row 1</td>
<td class="cg3">Row 1</td>
<td class="ct3"> </td>
</tr>
<tr>
<td class="cc1">Row 2</td>
<td class="cg1">Row 2</td>
<td class="cg1">Row 2</td>
<td class="ct1"> </td>
<td class="cg2">Row 2</td>
<td class="cg2">Row 2</td>
<td class="ct2"> </td>
<td class="cg3">Row 2</td>
<td class="cg3">Row 2</td>
<td class="ct3"> </td>
</tr>
<tr>
<td class="cc1">Row 3</td>
<td class="cg1">Row 3</td>
<td class="cg1">Row 3</td>
<td class="ct1"> </td>
<td class="cg2">Row 3</td>
<td class="cg2">Row 3</td>
<td class="ct2"> </td>
<td class="cg3">Row 3</td>
<td class="cg3">Row 3</td>
<td class="ct3"> </td>
</tr>
</table>
</body>
</html>
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (0)