How To Best Hide A Table Column For Mobile View - Stack Overflow

Just browsing Stack Overflow? Help us improve your experience. Sign up for research

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.

   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 How to best hide a table column for mobile view Ask Question Asked 11 years, 4 months ago Modified 6 years, 9 months ago Viewed 40k times 19

I have a HTML table, in a mobile browser I need to hide some of its columns.

I want to hide 2 or 3 of these cols using @media queries if possible. the below code didn't work for me:

<table> <tr> <td></td> <td class='collapsable'></td> <td class='collapsable'></td> <td></td> </tr> </table> //hide cols here td.collapsable {display:block; } @media only screen and (min-width: 450px) { //show cols here td.collapsable {display:none; } }

• html
• css
• html-table

Share Improve this question Follow edited Feb 12, 2018 at 11:45 Brian Tompsett - 汤莱恩 5,8757272 gold badges6060 silver badges133133 bronze badges asked Jul 24, 2013 at 15:03 IEnumerableIEnumerable 3,7901414 gold badges5151 silver badges8080 bronze badges 6

• Plan B: put a DIV in each cell. Class the DIVs by column. Hide the DIVs. – Diodeus - James MacFarlane Commented Jul 24, 2013 at 15:11
• ok, I see where you're at. Yes if no one post a direct solution that actually collapses that will have to do :) – IEnumerable Commented Jul 24, 2013 at 15:12
• Should your media query be max-width if you are hiding the column for smaller displays? – user1171848 Commented Jul 24, 2013 at 15:17
• 1 im coding css for mobile first, then using media queries for desktop. My question was worded the other way around. – IEnumerable Commented Jul 24, 2013 at 15:18
• Mmm I've seen this a lot. Assign class to the part that may not be displayed. Gues what? You still request the data.... Just don't post data to the mobiles. Or you expect all users to have unlimited data limits?? – Ron van der Heijden Commented Jul 24, 2013 at 15:30

| Show 1 more comment

4 Answers 4

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

Something like this? (try resizing the Result window/pane)

The HTML:

<tr> <td class="one">corpse</td> <td>corpse</td> <td>corpse</td> </tr>

The CSS:

table{ width: 50%; } td, th{ border: 1px solid orange; } @media only screen and (max-width: 900px) { .one{ display: none; } } Share Improve this answer Follow answered Jul 24, 2013 at 15:23 ZubzobZubzob 2,74344 gold badges3030 silver badges4646 bronze badges 5

• yes the jsfiddle looks good. love it thankyou; exactly what I was looking for. No more JS :) – IEnumerable Commented Jul 24, 2013 at 15:26
• @IEnumerable isn't this exactly what you had written in your question? – punkrockbuddyholly Commented Jul 24, 2013 at 15:37
• Oh I see, it's effectively the opposite of what you did. – punkrockbuddyholly Commented Jul 24, 2013 at 15:47
• 5 thats one way to get rid of a corpse – Jason Portnoy Commented Jan 17, 2016 at 22:35
• Thanks, I had the same problem but I also added CSS style display:block; for class .one outside of the @media to make it visible again on all other screen sizes, but apparently that is not necessary. – Al John Commented Jan 20, 2020 at 12:04

Add a comment | 14

Keep your HTML and table markup clean by using nth-child to hide the column. Should work with every modern browser that supports media queries.

Here's a sample fiddle showing it in action. Resize the result pane to see it work.

https://jsfiddle.net/tycahill/xm0nwr7x

The clean HTML:

<table> <tr> <td>Column 1a</td> <td>Column 2a</td> <td>Column 3a</td> </tr> <tr> <td>Column 1b</td> <td>Column 2b</td> <td>Column 3b</td> </tr> </table>

The CSS to hide the second column:

@media only screen and (max-width: 800px) { td:nth-child(2) { display:none; } } Share Improve this answer Follow answered Sep 1, 2016 at 16:47 Ty the Web GuyTy the Web Guy 19111 silver badge44 bronze badges 0 Add a comment | 2

Plan B: put a DIV in each cell. Class the DIVs by column. Hide the DIVs. You may need to adjust your table's cellpadding/cellspacing and put it on the .cell DIV to maintain the previous appearance.

<table> <tr> <td><div class='cell'></div></td> <td><div class='cell collapsable'></div></td> <td><div class='cell collapsable'></div></td> <td><div class='cell'></div></td> </tr> </table> Share Improve this answer Follow answered Jul 24, 2013 at 15:19 Diodeus - James MacFarlaneDiodeus - James MacFarlane 114k3333 gold badges163163 silver badges180180 bronze badges 1

• good work with the .cell - I just tried it out and worked fine. – IEnumerable Commented Jul 24, 2013 at 15:23

Add a comment | 2

I think your example has the display:block and display:none switched. Also, I would recommend using display: table-cell; instead of display: block;, since table-cell is the default display for <td> elements. This CSS worked for me, and also is a mobile-first approach:

td.collapsable {display:none; } @media only screen and (min-width: 450px) { td.collapsable {display:table-cell; } } Share Improve this answer Follow answered Jul 24, 2013 at 15:27 user1171848user1171848 29611 gold badge44 silver badges1010 bronze badges 2

• 1 Im having trouble making this work, do I apply the class to just the th or each td as well ? – IEnumerable Commented Jul 24, 2013 at 15:31
• I applied it to only the td. Maybe it's a browser-specific issue; have you tested in other browsers? – user1171848 Commented Jul 24, 2013 at 15:32

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

or ask your own question.

• The Overflow Blog
• Your docs are your infrastructure
• Featured on Meta
• More network sites to see advertising test [updated with phase 2]
• We’re (finally!) going to the cloud!
• Call for testers for an early access release of a Stack Overflow extension...

Related

1 Is there any way to hide a column in a table? 7 Hide Columns in responsive table using css 0 How can i hide certain table column in a HTML table using CSS 2 How to hide some of the columns in the table when in mobile view? 1 Hide Table Column in CSS 30 bootstrap-table hide column in mobile view 3 Hide HTML Table Columns 3 For mobile first approach,how to display all table column in desktop size after hiding some column in mobile size 0 Hide table columns for mobile view 0 How to Hide Mysql table Column in mobile version

Hot Network Questions

• Comedy/Sci-Fi movie about one of the last men on Earth living in a museum/zoo on display for humanoid robots
• Is Holy Terra Earth?
• Perfect eden - Whence conflict?
• Is there a cryptographic method that can only decrypt for a certain range of seeds?
• What adaptations are necessary to make a horse-sized beetle possible?
• How do you calculate the number of skid patches on a fixie?
• Standard SMD chip resistor with higher power in the same package
• How do I go about rebranding a fully deleted project that used to have a GNU General Public License v3.0 but is now fully inaccessible
• Phonon convergence
• Skylab's Boom during EVA
• Trump's tariff plan
• Find the Smallest Data Type for a Number
• Problem with highlighting first row and column of a table
• Can you please advise on kerning?
• Is there a symbol for the Hyper key?
• Why is bash startup executed under non-interactive ssh
• How do I remove a hat from my horse?
• Can this strong directional blur at wide apertures still be explained by the usual arguments?
• What's a good way to append a nonce to ciphertext in Python for AES GCM in Python?
• What is small arch between two notes and how to play it?
• Clarification and Proof of Inequality (8.11) in Analytic Number Theory by Iwaniec and Kowalski
• testing for a correlation between a real number and percentage accuracy
• Arrange 3 red balls and 33 white balls randomly in a circle. What is the probability that there are no more than 13 consecutive white balls?
• How to prune the rows of a Table

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