How To Hide Columns In HTML Table? - Stack Overflow

Sorry, we no longer support your browser Please upgrade to Microsoft Edge, Google Chrome, or Firefox. Learn more about our browser support.

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Explore Teams Create a free Team
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs How to hide columns in HTML table? Ask Question Asked 13 years, 3 months ago Modified 3 years, 4 months ago Viewed 517k times 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?

• html
• asp.net
• html-table

Share Improve this question Follow edited May 12, 2019 at 7:31 4b0 22.2k3030 gold badges9696 silver badges142142 bronze badges asked Mar 26, 2011 at 6:11 user601367user601367 2,3481212 gold badges3434 silver badges4444 bronze badges Add a comment |

10 Answers 10

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 207

You need to use Style Sheet for this purpose.

<td style="display:none;"> Share Improve this answer Follow answered Mar 26, 2011 at 6:30 AnurajAnuraj 19.4k77 gold badges5858 silver badges8282 bronze badges 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 – Vitaliy Terziev Commented Jul 26, 2017 at 9:41

Add a comment | 99

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).

Share Improve this answer Follow edited Apr 7, 2015 at 20:34 answered Nov 22, 2012 at 12:08 KosKos 71.6k2525 gold badges171171 silver badges237237 bronze badges 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

Add a comment | 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.

Share Improve this answer Follow answered Nov 22, 2012 at 11:52 Dov MillerDov Miller 1,99855 gold badges3434 silver badges4848 bronze badges 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

Add a comment | 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.

Share Improve this answer Follow edited Feb 15, 2020 at 16:45 Kenny Evitt 9,50166 gold badges6868 silver badges9595 bronze badges answered Apr 7, 2015 at 20:11 Rick SmithRick Smith 9,1911616 gold badges8383 silver badges8686 bronze badges Add a comment | 13

Bootstrap people use .hidden class on <td>.

Share Improve this answer Follow edited May 29, 2016 at 14:59 dakab 5,7371010 gold badges4444 silver badges7070 bronze badges answered Jan 7, 2016 at 17:26 theapache64theapache64 11.5k1010 gold badges6969 silver badges118118 bronze badges 1

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

Add a comment | 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

Share Improve this answer Follow edited Jan 9, 2017 at 13:09 answered Dec 31, 2016 at 16:16 Colonel PanicColonel Panic 136k9494 gold badges413413 silver badges474474 bronze badges Add a comment | 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.

Share Improve this answer Follow answered May 8, 2015 at 8:32 souvik settsouvik sett 8311 silver badge66 bronze badges Add a comment | 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.

Share Improve this answer Follow answered Mar 26, 2011 at 6:31 tamarintechtamarintech 1,9921313 silver badges1717 bronze badges Add a comment | 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); Share Improve this answer Follow edited May 25, 2020 at 16:02 answered May 25, 2020 at 15:12 AlbertAlbert 111 bronze badge 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. – Jaimil Patel Commented May 25, 2020 at 16:14

Add a comment | 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.

Share Improve this answer Follow answered Feb 2, 2021 at 6:13 Rajkumar KRajkumar K 111 bronze badge Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

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

• html
• asp.net
• html-table

or ask your own question.

• Featured on Meta
• Upcoming sign-up experiments related to tags
• Policy: Generative AI (e.g., ChatGPT) is banned
• The [lib] tag is being burninated
• What makes a homepage useful for logged-in users

Visit chat

Linked

3 How to hide table column with javascript? 0 Hide multiple table columns with javascript 6 Hide table column with vue js 1 Hide Table Column in CSS 2 How to hide index level in pandas <1.4 0 Hide table column via code 0 Alter an HTML table in code 1 How to set fiter and order data to a DataTables cell 0 Detect click on a table column header, hide the column, then display it again 0 AngularJS ng-show on colgroup tag See more linked questions

Related

6 ASP.NET : Hiding columns in gridview 2 ASP.NET 2.0 HtmlTable Rows - hiding without making invisible 4 hide column of table with codebehind 6 How to hide Columns in WebGrid? 2 How do I hide a column in an asp:Table? 22 Hiding columns in table JavaScript 1 How to make a HTML table <TD> invisible 0 How to hide columns in a tables ? BootStrap in mvc4 3 Hide HTML Table Columns 2 Html table hide columns best practice

Hot Network Questions

• Navigation on Mars without Martian GPS
• How many steps are needed to turn one "a" into at least 100,000 "a"s using only the three functions of "select all", "copy" and "paste"?
• Do I need to indicate 'solo' for wind/brass instruments in shared staff?
• Is there any other reason to stockpile minerals aside preparing for war?
• Do known physical systems all have a unique time evolution?
• Exception handling: is one exception type sufficient?
• How can I confirm for sure that a CVE has been mitigated on a RHEL system?
• Where can I access records of the 1947 Superman copyright trial?
• D&D 3.5 Shadow Magic / Shadow Conjuration: Can an illusionist create a quasi-real shadow of ANY monster? Or only those on the summon monster lists?
• Did the BBC censor a non-binary character in Transformers: EarthSpark?
• How do guitarists remember what note each string represents when fretting?
• Why was the animal "Wolf" used in the title "The Wolf of Wall Street (2013)"?
• Is Légal’s reported “psychological trick” considered fair play or unacceptable conduct under FIDE rules?
• Why depreciation is considered a cost to own a car?
• Determine the voltages Va and V1 for the circuit
• Conjectures about the greatest common divisor of a vertical column of the pascal triangle.
• Simple Container Class
• Cloud masking ECOSTRESS LST data
• How do you say "living being" in Classical Latin?
• How is Victor Timely a variant of He Who Remains in the 19th century?
• Summation not returning a timely result
• Can I get a refund for ICE due to cancelled regional bus service?
• Do capacitor packages make a difference in MLCCs?
• Should I accept an offer of being a teacher assistant without pay?

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html