CSS Selectors for Tables

It’s not often that I have to work on tables in CSS—I’m no longer making webpages with FrontPage and it’s no  longer 1998.  However, tables are still a very valid part of HTML, so long as they are actually used for tabular information, not for laying out page.

Such was the case when working on a schedule of tour stops for Concerned Veterans for America.  They have a two-week tour, launching at the end of a month.  So, they only wanted to display the latter half of a calendar generated by The Events Calendar, a plugin by Modern Tribe.

I knew I didn’t want to edit the plugin (I want to keep auto-updating it) and I was pretty sure this could be solved with CSS anyway. So of course I headed straight to W3C’s pseudo selector page to figure this out.  Initially, after reading the example provided, I though this would do the trick:

.tribe-events-calendar tr:nth-child(-n+2) {
display: none;

The above would select only tables with the class “tribe-events-calendar” and would then hide the first two rows of the table. However, I neglected to consider that the table header or <th> element, despite being a different element than table row or <tr> element, would be treated the same by CSS.

Thankfully, Modern Tribe makes it a point to properly code their tables, so the <th> element was set outside of the table body. So, a quick selector change did the trick:

.tribe-events-calendar tbody tr:nth-child(-n+2) {
display: none;

I love it when I get the chance to use a new pseudo-selector! Be sure to check out the W3C tutorials on this if you’re ever in need

Submit a Comment

Your email address will not be published. Required fields are marked *