113

I have created a table in ASPX. I want to hide one of the columns based on the requirement but there is no attribute like visible in the HTML table building. How can I solve my problem?

10 Answers 10

207

You need to use Style Sheet for this purpose.

<td style="display:none;">
4
  • 1
    what about only first coloumn using css of html
    – office 302
    Commented Sep 8, 2015 at 19:18
  • how should i add style to it when i am making table using javascript createelement(td);
    – office 302
    Commented Sep 8, 2015 at 19:20
  • 2
    @office302 Apply this style only to the first td? Or you want to use only CSS - This you can do something like this td:first-child { display:none; }
    – Anuraj
    Commented Sep 9, 2015 at 6:08
  • @Anuraj it should be noted that :first-child etc. are supported > IE 11 and Edge, good one anyway Commented Jul 26, 2017 at 9:41
101

You can use the nth-child CSS selector to hide a whole column:

#myTable tr > *:nth-child(2) {
    display: none;
}

This works under assumption that a cell of column N (be it a th or td) is always the Nth child element of its row.

Here's a demo.


​ If you want the column number to be dynamic, you could do that using querySelectorAll or any framework presenting similar functionality, like jQuery here:

$('#myTable tr > *:nth-child(2)').hide();

Demo with jQuery

(The jQuery solution also works on legacy browsers that don't support nth-child).

4
  • 1
    This can have damaging side effects, see my answer below for an improved solution.
    – Rick Smith
    Commented Apr 7, 2015 at 20:12
  • @RickSmith Good point. Updated my post to avoid the problem in another way (using the child selector).
    – Kos
    Commented Apr 7, 2015 at 20:38
  • child selector is definitely better. Good answer.
    – Rick Smith
    Commented Apr 7, 2015 at 20:42
  • Nice solution but need a bit more consideration on the colspan case.
    – Cinoss
    Commented Mar 26, 2016 at 9:27
37

you can also use:

<td style="visibility:hidden;">
or
<td style="visibility:collapse;">

The difference between them that "hidden" hides the cell but it holds the space but with "collapse" the space is not held like display:none. This is significant when hidding a whole column or row.

2
  • 2
    I've found that for div tags collapse also will hold the space. For the div tags you would have to use display: none; in order to truly collapse and not hold the space.
    – Dov Miller
    Commented Apr 3, 2016 at 11:30
  • 5
    visibility: collapse is designed specifically for handling cell showing/hiding, since there is a difference when recalculating cell width/height between this and display:none. See developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values
    – SteveB
    Commented Sep 23, 2016 at 7:18
34

Kos's answer is almost right, but can have damaging side effects. This is more correct:

#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
    display: none;
}

CSS (Cascading Style Sheets) will cascade attributes to all of its children. This means that *:nth-child(1) will hide the first td of each tr AND hide the first element of all td children. If any of your td have things like buttons, icons, inputs, or selects, the first one will be hidden (woops!).

Even if you don't currently have things that will be hidden, image your frustration down the road if you need to add one. Don't punish your future self like that, that's going to be a pain to debug!

My answer will only hide the first td and th on all tr in #myTable keeping your other elements safe.

13

Bootstrap people use .hidden class on <td>.

1
  • 4
    <td hidden> </td> worked for me! Thanks.
    – cluis92
    Commented Mar 15, 2022 at 19:30
7

You can also hide a column using the col element https://developer.mozilla.org/en/docs/Web/HTML/Element/col

To hide the second column in a table:

<table>
  <col />
  <col style="visibility:collapse"/>
  <tr><td>visible</td><td>hidden</td></tr>
  <tr><td>visible</td><td>hidden</td></tr>

Known issues: this won't work in Google Chrome. Please vote for the bug at https://bugs.chromium.org/p/chromium/issues/detail?id=174167

2

<style>
.hideFullColumn tr > .hidecol
{
    display:none;
}
</style>

use .hideFullColumn in table and .hidecol in th.You don't need to add class in td individually as it will be problem because index may not be in mind of each td.

1

You can also do what vs dev suggests programmatically by assigning the style with Javascript by iterating through the columns and setting the td element at a specific index to have that style.

0
<!doctype html>
<html lang="en">
<head>
<style id="myStyleSheet">
...
</style>

var column = 3;
var styleSheet = document.getElementById("myStyleSheet").sheet;
var rule = "table  tr td:nth-child("+ column +"),table th:nth-child("+ column +") 
{display: none}";
styleSheet.insertRule(rule);
1
  • 3
    Hope It will solve issue but please add explanation of your code with it so user will get perfect understanding which he/she really wants. Commented May 25, 2020 at 16:14
0

Here is the another solution to hide dynamically a column

define class for both th and td of the column to hide

<table>
   <tr>
     <th> Column 1 </th>
     <th class="dynamic-hidden-col"> Column 2 </th>
     <th Column 3 </th>
  </tr>
  <tr>
     <td> Value 1 </td>
     <td class="dynamic-hidden-col"> Value 2 </td>
     <td> Value 3 </td>
  </tr>
     <td> row 2 Value 1 </td>
     <td class="dynamic-hidden-col"> row 2 Value 2 </td>
     <td> row 2 Value 3 </td>
  <tr>
</table>

Here is the Jquery script for hide column.

$('#hide-col').click(function () {      
    $(".dynmic-hidden-col").hide();
});

This way the table column can be hidden dynamically.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.