Hiding table columns

Hiding Table Columns Using Pseudo-Selectors

Today is kind of a strange day, there I was watching Boy Meets World (don’t judge) and I inadvertently solved a problem that I had a few months ago on a different project completely on random. The project was trying to make a table responsive, the table had been generated through Javascript so I couldn’t add the necessary classes in Bootstrap (so much easier than adjusting media queries) or add classes to the selected table data and table headers and hiding them in media queries. It was a tough situation and caused a lot of headaches. I’m not going to recreate the whole thing since the table was in different tabs because I don’t want to give you awesome people a severe migraine, let alone myself. Trust me, I know from experience. But I will give you a quick tutorial on a simple fix if you’re stuck using pseudo selectors to make a table bend to your will. So let’s get dirty…

First, I’m going to build two tables in HTML, This is not semantic!

Second, I’m going to make it pretty by adding some CSS.

and then we’ll end up with something like this

# First Name Last Name Username
1 Domo Arigato Mr. Roboto
1 Domo Arigato Mr. Roboto
1 Domo Arigato Mr. Roboto
1 Domo Arigato Mr. Roboto
# First Name Last Name Username
1 Domo Arigato Mr. Roboto
1 Domo Arigato Mr. Roboto
1 Domo Arigato Mr. Roboto
1 Domo Arigato Mr. Roboto

It’s not as threatening now but just wait, we’ve barely scratched the surface. When I had the problem, the one table had at least 50 rows mixed between 10 tabs without anything distinctly to go off of for selectors. This time it was so much easier that I almost did a pirouette…almost.

Now that it is made, let’s get into the media query.

The media query is set at a max-width of 900px so any screen width under 900px and the table or any other element will adjust with the correct coding. For a more in depth description of media queries you can find those Here.

Here comes the headache, trying to decipher what is what using a mix of :nth-child, :last-of-type, and :first-of-type. Some might ask why I chose those specific pseudo-selectors for this when the task could’ve been done simpler using a different equation in :nth-child, well I chose those specific pseudo-selectors because of the problem I had. It wasn’t this easy, and by no means is this technically easy for a beginner. On my previous project, there wasn’t an equation I could come up with that was consistent across all break points because each break point or media query was set to hide different columns. I hate to say it but I told you so. Multiple headaches.

Anyways, this is what worked out on these tables that is mostly similar to the problem I had.
*It is always best to write out what you need to hide and what child/type they are on a notepad.*

Ok, so that was the media query. There are two different pseudo-selectors on three levels (I think) on this one media query. I’ll try and break it down for you one level at a time.

.table:first-of-type

This is fairly self-explanatory, it is saying that it is the first of it’s type. There’s two tables with the class of “.table” so there’d be two types.

tr:nth-child()

This, I think, is the more complicated one so I’ll try to explain it using basic Algebra. The focus of it is “nth.” “nth” is using the letter “n” as a variable similar to “x” in Algebra. “x” can mean anything so can “n.” The number or equation you put in parentheses such as “tr:nth-child(2x+1)” or in this case, “tr:nth-child(2).” In this instance, “tr:nth-child(2),” is selecting the table row that is the second child of the table or in other words the second table row.

td:nth-child()

This is basically the same as the table row except with table data. It’ll select any number as long as it exists.

As you can see, looking at that CSS for a while will most definitely give you a headache that only an Ibuprofen the size of Texas will cure. I’ll give you a working example you can play with. All you have to do is resize the browser window.

# First Name Last Name Username
1 Domo Arigato Mr. Roboto
1 Domo Arigato Mr. Roboto
1 Domo Arigato Mr. Roboto
1 Domo Arigato Mr. Roboto
# First Name Last Name Username
1 Domo Arigato Mr. Roboto
1 Domo Arigato Mr. Roboto
1 Domo Arigato Mr. Roboto
1 Domo Arigato Mr. Roboto

So to conclude this tutorial/fix/headache (Sorry!), the fix for my original problem was that I simply didn’t include pseudo-selectors on the parent of each tabbed part of the table. It’s ok if it doesn’t make sense, I can’t give an exact clone of the website’s table because I believe that to be copyright infringement.