CSS For Hiding Multiple Columns In A Table - Html - Stack Overflow

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 CSS for hiding multiple columns in a table Ask Question Asked 10 years, 7 months ago Modified 6 years, 11 months ago Viewed 83k times 23

I have a table similar to the one illustrated below in a SharePoint site. I cannot modify the table as it is generated dynamically but I can add external CSS to override its style. I am required to show only second column and hide first, third and fourth column.

The pseudo class to hide first column is

table#student tr td:first-child { display: none; }

Please help me with pseudo class or any other trick to hide third and forth column.

<table id="student"> <tr> <td>Role</td> <td>Merin</td> <td>Nakarmi</td> <td>30</td> <tr> <td>Role</td> <td>Tchelen</td> <td>Lilian</td> <td>22</td> </tr> <tr> <td>Role</td> <td>Suraj</td> <td>Shrestha</td> <td>31</td> </tr> </table>

• html
• css
• html-table
• hide
• pseudo-class

Share Improve this question Follow edited Jul 27, 2017 at 12:02 Brian Tompsett - 汤莱恩 5,8377272 gold badges6060 silver badges132132 bronze badges asked Nov 20, 2013 at 8:26 Merin NakarmiMerin Nakarmi 3,33833 gold badges3737 silver badges4343 bronze badges Add a comment |

5 Answers 5

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

CSS3:

table#student td { display: none; } table#student td:nth-child(2) { display: block; }

Use nth-child selector to un-hide the 2nd <td> of every row, effectively showing the 2nd column.

Share Improve this answer Follow edited Nov 15, 2015 at 13:51 Shimmy Weitzhandler 104k124124 gold badges432432 silver badges638638 bronze badges answered Nov 20, 2013 at 8:32 AlienHobokenAlienHoboken 2,7702121 silver badges2323 bronze badges 3

• 4 These days, display: table-cell; is more appropriate. – Fabien Haddadi Commented Feb 22, 2018 at 4:57
• 2 Unfortunately this breaks tables using colspan. – Dai Commented May 26, 2020 at 8:56
• 1 @Dai I had exactly this problem and a solution which the space here is too narrow to contain. – theking2 Commented Oct 3, 2021 at 15:06

Add a comment | 25

You can use the CSS3 :nth-child() selector

td:nth-child(3), td:nth-child(4) { display: none }

jsfiddle here

Share Improve this answer Follow edited Nov 20, 2013 at 8:43 answered Nov 20, 2013 at 8:35 Aurélien GasserAurélien Gasser 3,06111 gold badge2121 silver badges2525 bronze badges Add a comment | 3

I'm surprised no one mentioned the general sibling selector. (More info here) If you only need to show second column, I'd apply a display: none; style to the first cell and all cells after the second one.

table#student td:first-child, table#student td:nth-child(2) ~ td { display: none; } <table id="student"> <tr> <td>Role</td> <td>Merin</td> <td>Nakarmi</td> <td>30</td> <tr> <td>Role</td> <td>Tchelen</td> <td>Lilian</td> <td>22</td> </tr> <tr> <td>Role</td> <td>Suraj</td> <td>Shrestha</td> <td>31</td> </tr> </table>

If you need to support IE7 and IE8 for some reason, you could replace the :nth-child() selector with the adjacent sibling selector:

table#student td:first-child, table#student td + td ~ td { display: none; } Share Improve this answer Follow answered Dec 4, 2015 at 22:09 stealththeninjastealththeninja 3,75022 gold badges2929 silver badges4444 bronze badges Add a comment | 0

Here you go.

The CSS:

table#student tr td:first-child, table#student tr td:nth-child(3), table#student tr td:nth-child(4) { display: none; }

WORKING DEMO

Share Improve this answer Follow answered Nov 20, 2013 at 8:38 NiteshNitesh 15.5k44 gold badges4848 silver badges6060 bronze badges Add a comment | -3

.hideFullColumn tr > .hidecol { display:none; }

You can use .hideFullColumn in the table and use .hidecol in the tag which you want to hide. You don't need to worry about td as those will automatically be hidden.

Pseudo class is fine but if you have 50 columns and have to hide 20, then you'd have to repeat the "td:nth-child(1),td:nth-child(2),...." 20 times by keeping the index in mind. But in this case you can add the .hidecol class on creating th, so you don't need to revise index.

You can try this and please let me know if it works.

Share Improve this answer Follow edited May 8, 2015 at 9:18 SuperBiasedMan 9,8991010 gold badges4949 silver badges7575 bronze badges answered May 8, 2015 at 8:40 souvik settsouvik sett 8311 silver badge66 bronze badges 1

• don't use it as it only hides th. – souvik sett Commented May 8, 2015 at 9:01

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
• css
• html-table
• hide
• pseudo-class

or ask your own question.

• The Overflow Blog
• How to build open source apps in a highly regulated industry
• Community Products Roadmap Update, July 2024
• Featured on Meta
• We spent a sprint addressing your requests — here’s how it went
• Upcoming initiatives on Stack Overflow and across the Stack Exchange network...
• Policy: Generative AI (e.g., ChatGPT) is banned
• What makes a homepage useful for logged-in users
• The [lib] tag is being burninated

Linked

41 CSS for first td of each tr in certain table 0 JQuery hide table column 1 How to hide or show a html table column 0 How to hide one cell in the ASCIIDOC table? -2 Hide multiple span element (span_0_1, span_1_1, span_2_1) from a column html table

Related

1 Is there any way to hide a column in a table? 39 show/hide html table columns using css 10 Is it possible to hide / show table columns by changing the CSS class on the col element only? 2 Hide columns in HTML table via CSS 0 How can i hide certain table column in a HTML table using CSS 1 Hiding a column of table with a class 1 Hide Table Column in CSS 2 Hide table columns by class 3 Hide HTML Table Columns 0 Hide columns in a table using CSS

Hot Network Questions

• What does a letter "R" means in a helipad?
• If a lambda is declared as a default argument, is it different for each call site?
• How far back in time have historians estimated the rate of economic growth and the economic power of various empires?
• Are there examples of triple entendres in English?
• Staying in USA longer than 3 months
• Can you help me to identify the aircraft in a 1920s photograph?
• Cannot reach web server in vm from bare metal using DNS after iptables rules forward packets to virtual bridge
• spath3 rotations shrink paths
• Line from Song KÄMPFERHERZ
• How much time do I need on my Passport expiry date to leave Australia for South Africa?
• What’s the highest salary the greedy king can arrange for himself?
• Why are my star jasmine flowers turning brown
• Identify rear derailleur (Shimano 105 - medium or short)
• In equation (3) from lecture 7 in Leonard Susskind’s ‘Classical Mechanics’, should the derivatives be partial?
• Can LP be solved using the previous solution during branching?
• Wait a minute, this *is* 1 across!
• Book that I read around 1975, where the main character is a retired space pilot hired to steal an object from a lab called Menlo Park
• Geometry question about a six-pack of beer
• Can you always extend an isometry of a subset of a Hilbert Space to the whole space?
• Name this kimberling center
• Two definitions of antisymmetrization of a tensor?
• What was the theological pamphlet attributed to Thomas Middleton?
• Can someone explain the Trump immunity ruling?
• Sitting on a desk or at a desk? What's the diffrence?

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