Hide/show Column in a HTML Table

javascript

responsive-design

performance

best-practices

byAnton Shumikhin·Feb 9, 2025

If speed is your thing, here's a quick way to toggle a HTML table column's visibility using JavaScript and CSS:

<button onclick="toggleColumn('col1')">Toggle First Column</button>

<table>
  <tr>
    <th class="col1">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td class="col1">Alice</td>
    <td>30</td>
  </tr>
  <!-- more rows... -->
</table>

<style>
  .hide { 
    display: none; 
    /* For those who love hide and seek */
  }
</style>

<script>
function toggleColumn(colClass) {
  var cells = document.getElementsByClassName(colClass);
  for (var cell of cells) {
    cell.classList.toggle('hide');
    /* Harry Potter might love this invisibility function */
  }
}
</script>

Just assign your desired <th> and <td> with a colClass and swap its visibility with the .hide on button click.

jQuery: the conjurer's charm

Having a soft spot for jQuery? The charm to toggle visibility of a specific column reads as below:

$('td:nth-child(2), th:nth-child(2)').toggle();
// Ta-da! The column does a Houdini.

Simply modify the .nth-child() numeric value based on the column you wish to control.

User-driven customization: Column Chooser

Amplify user interaction by integrating a column chooser granting users the control over which columns to display:

<label>
  <input type="checkbox" checked onclick="toggleColumn('col1')"> Name
</label>
// User empowerment! Now that's something to check-mark.

No need for tagging each td with classes. A nice checkbox click switches their visibility.

Speeding up with advanced CSS Selectors

In the face of massive tables, performance optimization becomes vital. Eliminate the need of attaching a class to every td by using CSS selectors like :nth-child and classes on table's container:

.table-container .hide-col2 td:nth-child(2) {
  display: none;
}

Voilà! Entire columns can be toggled through JavaScript by simply flipping the container class.

Smart usage of CSS Colgroup

Are <colgroup> and <col> elements part of your HTML arsenal yet? These tags target specific columns and offer better visibility control:

<table>
  <colgroup>
    <col class="col1">
    <col class="col2">
    <!-- more cols -->
  </colgroup>
  <!-- the rest of your table -->
</table>

And jQuery can toggle their visibility:

$('col.col1').toggleClass('hide');

Interactive headers via JavaScript

Boost interactive UX by assigning click handlers to your table headers:

$('th').click(function() {
  var index = $(this).index() + 1;
  $('td:nth-child(' + index + '), th:nth-child(' + index + ')').toggle();
});
// One click and poof! I promise it's not magic.

Indicating interactivity on headers fosters an engaging user experience.

Responsiveness consideration

For responsive design, it's crucial to adopt solutions that are light yet effective. Use CSS media queries and container classes to control columns' visibility at varying viewport sizes.

Selector optimization

In jQuery, using class or ID selectors speeds up DOM traversal, which is key to performance, particularly with large data sets. Refine selectors and avoid overly generic ones to prevent lag.

Call to action: clickable indicators

Embedding clickable indicators like icons or buttons on your table headers can signal users about the hide/show functionality, heightening user engagement.

Modernizing codebase

You might decide to ignore support for obsolete browsers like IE6. This benefits you with cleaner code and access to newer and more performant CSS features.

The charm of jQuery

The toggle() method in jQuery provides an easy way to show or hide elements. With checkbox states and JavaScript, users can effortlessly customize their view.

Organic look with CSS

Employ CSS to suggest interactivity. For instance, change the mouse cursor when hovering over clickable items or use distinct icons to indicate hide/show functionality.

Checkbox event handling with jQuery

Use jQuery for an effortless checkbox event handling and responsive visibility control.

Extra garnishing: Row Colorization

To take it up a notch, consider colorizing rows based on their values. It not only increases visual appeal but also augments user comprehension of data.

explain-codes / Javascript / Hide/show Column in a HTML Table

Linked

How to hide columns in an HTML table?



How to disable/enable select field using jQuery?



Setting "checked" for a checkbox with jQuery



How can I get a specific number child using CSS?



Alternate table row color using CSS?

