Last updated on November 7th, 2024 at 12:42 pm

Typically, we encounter the challenge of creating extensive tables that exceed the dimensions of the browser window, particularly when numerous columns are involved. This situation can hinder users’ ability to view the columns effectively, as the table becomes excessively large. Consequently, users must scroll horizontally within the browser to access all columns.

The following script proves to be beneficial for displaying large HTML tables with multiple columns that do not fit within a standard browser screen. It allows for the straightforward hiding and showing of columns using JavaScript. Additionally, some CSS styling has been applied to enhance the table’s appearance. In this implementation, the CSS display property ‘none’ is utilized to conceal columns, while the ‘table-cell’ property is employed for revealing them, as using ‘block’ may lead to complications in displaying hidden columns, especially when styles have been applied to the table.

Assuming we have the below HTML page with a table

<html>
<title>Display large table using html and hide columns using javascript</title>
<a href="" target=_blank>Go Back To Tutorial</a><p>
 <style>
 #users {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    width: 100%;
    border-collapse: collapse;
 
}
 
#users td, #users th {
    font-size: 1em;
    border: 1px solid #000;
    padding: 3px 7px 2px 7px;
}
 
#users tr.alt td {
    color: #000000;
    background-color: #EAF2D3;
}
</style>
<body onload="hide_me()">
<table id ="users" style="width:100%">
 <tr class="alt">
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
   <tr class="alt">
    <td>Eve1</td>
    <td>Jackson1</td>
    <td>94</td>
       <td>Jill1</td>
    <td>Smith1</td>
    <td>50</td>
  </tr>
</table>
<input type="button" onclick="show_me()" value="Show">
<input type="button" onclick="hide_me()" value="Hide">

By adding the following Javascript you will be able to hide a column, for example we are hiding column number 4


<script>
var row=document.getElementById("users").rows.length;
var col=document.getElementById("users").rows[1].cells.length;
var i,j;
var column_hide_from = 4;
function hide_me()
{
for (i=0;i<row;i++)
{
for (j=column_hide_from;j<col;j++)
{
//console.log("I is "+i+" J is "+j)
//console.log(document.getElementById("users").rows[i].cells[j].innerHTML)
document.getElementById("users").rows[i].cells[j].style.display = "none";
}
}
}
function show_me()
{
for (i=0;i<row;i++)
{
for (j=4;j<col;j++)
{
//console.log("I is "+i+" J is "+j)
//console.log(document.getElementById("users").rows[i].cells[j].innerHTML)
document.getElementById("users").rows[i].cells[j].style.display = "table-cell";
}
}
}
//alert("Number of rows "+row+" Number of columns "+col)
//alert(document.getElementById("users").rows[1].cells[12].innerHTML)
//document.getElementById("users").rows[1].cells[12].style.display = "none";
</script>

The code provided can be adjusted to hide specific columns by simply specifying the column number from which to begin hiding. For instance, if there are 17 columns and you wish to hide from the 9th column onward, you would set the variable column_hide_from to 9. The script will automatically conceal columns starting from the 9th.

It is at the user’s discretion to view the entire table or just a portion of it. To display the complete table, simply click the button labeled SHOW. This action will invoke the JavaScript function show_me(), which will reveal the columns accordingly. If you wish to hide the columns again, you can click the button labeled HIDE, which will call the function hide_me(). Below, you will find a sample HTML CSS table accompanied by a button. Additionally, the JavaScript function to hide the columns will be executed automatically upon the page’s load.

Code Breakdown:

  1. Getting Table Dimensions:
    var row = document.getElementById("users").rows.length; var col = document.getElementById("users").rows[1].cells.length;
    • row stores the number of rows in the table with the ID "users". It gets this value by accessing the rows property of the table and checking its length.
    • col stores the number of columns in the second row (rows[1]) of the table by counting the cells (cells.length) in that row. The assumption here is that all rows have the same number of columns, so this will give the total column count in the table.
  2. Loop Variables:javascriptCopy codevar i, j;
    • These are loop variables used to iterate through the rows (i) and columns (j) of the table.
  3. column_hide_from Variable:
    var column_hide_from = 4;
    • This variable defines the starting column index (5th column, since the index is 0-based) from where the columns will be hidden or shown. In other words, columns 5 and beyond (with index 4 and higher) will be affected by the hide/show functionality.
  4. hide_me Function:
    function hide_me() { for (i = 0; i < row; i++) { for (j = column_hide_from; j < col; j++) { // Hide the cell at row i, column j document.getElementById("users").rows[i].cells[j].style.display = "none"; } } }
    • This function hides the cells starting from the 5th column (index 4) in all rows of the table.
    • It loops through each row (i) and for each row, it loops through the columns starting from column 5 (j = 4).
    • For each table cell, it sets the CSS display property to "none", which hides that specific cell.
  5. show_me Function:
    function show_me() { for (i = 0; i < row; i++) { for (j = 4; j < col; j++) { // Show the cell at row i, column j document.getElementById("users").rows[i].cells[j].style.display = "table-cell"; } } }

Demo