Why Can't I Hide A Table Column In CSS Using The Property?

Trang chủ » Html Table Hide Column Colgroup » Why Can't I Hide A Table Column In CSS Using The Property?

Có thể bạn quan tâm

    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.

    Try Teams for free Explore Teams
  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 Why can't I hide a table column in CSS using the <col> property? Ask Question Asked 9 years, 6 months ago Modified 1 year, 10 months ago Viewed 5k times 3

I found how I can hide a table column in this thread.

I first tried

<colgroup> ... <col style="visibility:hidden;"> ... </colgroup>

and also

<colgroup> ... <col style="display:none;"> ... </colgroup>

but neither has any effect. I noticed that other styling properties don't work either on <col>s either. What can the <col> tag be used for, and what would be its typical use?

  • css
Share Improve this question Follow edited May 23, 2017 at 11:50 Community's user avatar CommunityBot 11 silver badge asked May 13, 2015 at 7:51 stevenvh's user avatar stevenvhstevenvh 3,1519 gold badges45 silver badges56 bronze badges 2
  • 1 possible duplicate of <col class="slick"> does not apply class to the columns of a table – Marcel Burkhard Commented May 13, 2015 at 7:52
  • display:none will not work, while visibility:collapse will. See w3.org/TR/CSS21/tables.html#columns – elixon Commented Jan 14, 2023 at 13:28
Add a comment |

3 Answers 3

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

The <col> element only applies certain CSS properties to the cells within the targeted column. One of these properties is visibility:collapse, which will have the desired effect of hiding the entire column.

Therefore, to hide an entire column, the correct code would be

<col style="visibility: collapse;">

Reference: https://www.w3.org/TR/CSS21/tables.html#columns

Share Improve this answer Follow answered Jan 14, 2023 at 13:24 elixon's user avatar elixonelixon 1,29415 silver badges17 bronze badges Add a comment | 1

that's because the col-element isn't "visible" in the first place, it's just an "alias" for the table columns. If you want to hide the second column for-example, apply it directly to the tds like:

tr td:nth-child(2) { display: none; /* or */ visibility: hidden; } Share Improve this answer Follow edited May 13, 2015 at 8:45 John's user avatar John 13.7k14 gold badges109 silver badges189 bronze badges answered May 13, 2015 at 7:57 AlexK's user avatar AlexKAlexK 4691 gold badge5 silver badges14 bronze badges 3
  • 1 Thanks, but that doesn't explain why we would need the <col> tag in the first place. – stevenvh Commented May 13, 2015 at 8:18
  • 2 You should not use (or, ahem, suggest) using the display and visibility properties interchangeably, they both exist for different purposes. – John Commented May 13, 2015 at 8:46
  • 2 i thought I'd leave the decision to him, whatever his needs are... since he had both in his question... – AlexK Commented May 13, 2015 at 9:28
Add a comment | 0 What is colgroup for?

The colgroup can be used the set the width, and only the width, of the columns of a given table.

Solution for your use case

See this answer.

That means you need to apply the styles to each cell individually. You could try something like:

<head> ... <style type="text/css"> table.myTable tr td:nth-child(4) { visibility:hidden; } </style> ...

where 4 is the index of the column.

nth-child documentation on MDN

Share Improve this answer Follow edited Jun 20, 2020 at 9:12 Community's user avatar CommunityBot 11 silver badge answered May 13, 2015 at 7:56 Marcel Burkhard's user avatar Marcel BurkhardMarcel Burkhard 3,5231 gold badge31 silver badges35 bronze badges 4
  • Thanks, but that doesn't explain why we would need the <col> tag in the first place. – stevenvh Commented May 13, 2015 at 8:18
  • @stevenvh It is handy to set the widths of the columns directly in html. I personally don't use it that often because I want to seperate markup from styling and thus use css instead. Updated my answer accordingly – Marcel Burkhard Commented May 13, 2015 at 11:11
  • colgroup also allows background-color – Prescol Commented Apr 13, 2018 at 12:04
  • 1 you can also set background color and probably most css but not hide them. if you do you will hide only the col itself :( – tibi Commented Jun 9, 2018 at 19:59
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
  • css
or ask your own question.

  • The Overflow Blog
  • We'll Be In Touch - A New Podcast From Stack Overflow!
  • The app that fights for your data privacy rights
  • Featured on Meta
  • More network sites to see advertising test
  • We’re (finally!) going to the cloud!
  • Call for testers for an early access release of a Stack Overflow extension...

Linked

40 show/hide html table columns using css 3 <col class="slick"> does not apply class to the columns of a table 0 How can i hide certain table column in a HTML table using CSS 1 Is there any way to hide a column in a table? 10 Is it possible to hide / show table columns by changing the CSS class on the col element only? 4 Problem when trying to hide a column using HTML/CSS 0 How can i hide certain table column in a HTML table using CSS 0 HTML Table hide Column doesn't work anymore? 0 Problems hiding a table column in CSS 1 Hiding a column of table with a class 1 Hide Table Column in CSS 3 Hide HTML Table Columns 0 Hide columns in a table using CSS

Hot Network Questions

  • Can a storage device completely erase itself while performing the erase?
  • Is my evaluation for this multiple linear regression correct?
  • Can a contradiction exist in the antecedent of a sequent?
  • Is recursive variable assignment bad even if recursively assigning single row?
  • Is Exception caught in the Service class a matter of preference?
  • What's the deal with De Morgan algebras and Kleene algebras?
  • How to stop Apple Sports live activities watch notifications?
  • Can we use the simple present tense to express a habit that starts just about 24 hours or less ago?
  • Density in the real line
  • Understanding Linux 'top' command: Memory vs Swap display format confusion
  • Does a touch spell have advantage when delivered by an invisible Familiar?
  • What is it called when you have a hobby where you're good enough at to impress others but you yourself know you're only beginning?
  • Why the second C in "recyceln" is pronounced [k] instead of [ts]?
  • Dantzig-Wolfe Decomposition for nurse Scheduling problem
  • Categories in which isomorphism of stalks does not imply isomorphism of sheaves
  • Testing Puzzles for Puzzle Book: Enigmatic Puzzle
  • What is the best language to speak with locals in Singapore?
  • Superimposed triangles
  • Suggestion for catching a flight with short layover in Amsterdam
  • Was it really possible to damage my VGA card by programming it in assembly through its latches registers?
  • Is it legal to take advantage of loopholes in GAAP to misrepresent profit?
  • How to draw this matrix with stairs and submatrices?
  • Does the earliest known use of an "average" occur after the invention of calculus?
  • Why does glm in R with family binomial(link="log") sometimes require start values?
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.

default

Từ khóa » Html Table Hide Column Colgroup