table column colors

Hi,

thanks for your post, and sorry for the trouble.

The last comma , before the opening { breaks the CSS. CSS is pretty strict ther ??
Please try again with

.tablepress-id-weekdaystbl .column-1,
.tablepress-id-weekdaystbl .column-3,
.tablepress-id-sundaystbl .column-1,
.tablepress-id-sundaystbl .column-3,
.tablepress-id-saturdaystbl .column-1,
.tablepress-id-saturdaystbl .column-3 {
  background-color: #d0dfe1;
}

Regards,
Tobias

I don’t know how I missed that. I knew I was just too tired of looking at it, and it was something stupid like that. ??

Now, one more question: How can I change the “mouseover” effect to only hit the current “cell” instead of the current “row” …as you can see I needed to set up a full 24 hour time block in 1/2 hour increments, which takes up a lot of space, so I had to “double-column”, or split the data.

I love this plugin. It may not be responsive, but the tabs shortcode I used is, as is the theme, so the fluidity works fine on my site. The table rows just expand down, which is nice. I think another thing I would like to do, is just change the font size on smaller screens…I won’t trouble you yet for that one though. (unless you just happen to have it handy ?? )

It’s difficult to use tables, and not make them look “old-school” and flat…usually they ruin a site, but yours are very nice. In your documentation, your class and ID callouts are very unclear. I had to actually put the table on a page, and then look at the HTML source to see what it was actually doing…I may have missed it, but I did not read anywhere where it said that the ID was prefixed by #tablepress- …so you could fix that, or make it more visible if I just missed it. (I did read it for the additional class somewhere, but not for ID & # )

Hi,

good to hear that this helped!

For the single cell mouseover, you could use this “Custom CSS” (after deactivating the “Row Hover” feature on the “Edit” screen of the table):

.schedule_tables .column-2:hover,
.schedule_tables .column-4:hover {
  background-color: #ff0000 !important;
}

For the reduced font size on smaller screens, please try this “Custom CSS”:

@media (max-width: 767px) {
  .schedule_tables td {
    font-size: 80%;
  }
}

And thanks for the feedback on the CSS documentation. I’ll indeed have to restructure and update that…

Regards,
Tobias