Visually Removing the Table Lines on Hover

  • Resolved jfbprivate

    (@jfbprivate)


    5 years ago

    Hi,

    This might be somewhat tricky at best.

    My table has a transparent/inherited background (#ffffff). The table rows’ background color changes to #f8f8f8 on hovering—just slightly darker than white. The only other attributes are top and bottom lines set to #e5e5e5—again, slightly darker than #f8f8f8.

    The reason I chose two different shades of gray is that, on one hand, the lighter gray is perfectly visible on the canvas when hovering over the rows. On the other hand, however, as 1px lines, they’re hardly distinguishable from white, which is why I picked a darker gray for them.

    Now my question would be whether it is possible somehow to change the color of the top and bottom lines from #e5e5e5 (the darker gray) to #f8f8f8 (the lighter gray) when hovering over a row, in order to make the block appear as the same color, basically “removing” the lines—at least visually.

    Thanks for any tips or ideas.

Viewing 14 replies - 16 through 29 (of 29 total)
1 2
  • Thread Starter jfbprivate

    (@jfbprivate)

    5 years ago

    Hi Tobias,

    I’ve recreated the whole CSS from scratch and figured it out for the most part. However, this issue still remains:

    “But there’s one last issue—and my theme is partly to blame for it: I’d like to enable the first and last row borders of my table which are disabled by default. I saw that they’re usually there in the regular WordPress themes. How can I activate them without ruining the above feature again?”

    Any ideas?

    Thanks.

    Plugin Author TobiasBg

    (@tobiasbg)

    5 years ago

    Hi,

    do you have a link to the page with the current table?

    Regards,
    Tobias

    Thread Starter jfbprivate

    (@jfbprivate)

    5 years ago

    Sure, here’s an exact copy of the CSS with the borders missing as per the theme’s default:

    http://proud-chicken.w5.wpsandbox.pro/tablepress/

    Thanks for looking into it.

    Plugin Author TobiasBg

    (@tobiasbg)

    5 years ago

    Hi,

    thanks! Actually, this should be simpler than I thought:

    .tablepress {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

    Regards,
    Tobias

    Thread Starter jfbprivate

    (@jfbprivate)

    5 years ago

    Yes, that did the trick. Thanks very much!

    I believe my mistake was that I included the borders in the “tbody td” which would mess with my original idea of changing the the color of both borders. That particular line then left one of the borders at #e5e5e5.

    Thanks again.

    Thread Starter jfbprivate

    (@jfbprivate)

    5 years ago

    Wait, I was too fast. Ironically, now the top border (the one that divides the header from the rest of the table) does not change its color. Even the header does what I want if I would want it, but the first actual row doesn’t. The footer is fine. I’ve updated the code—you’ll see now there’s only one stubborn border left to convince . . . LOL!

    Thread Starter jfbprivate

    (@jfbprivate)

    5 years ago

    It’s directly related to the header. When I deactivate the header it works as desired. If the first row acts as a header, however, its bottom border (or the top border of the first actual row) remains dark gray.

    Thread Starter jfbprivate

    (@jfbprivate)

    5 years ago

    I tweaked the CSS a little bit, and I’m gonna leave it as is now:

    I removed the “.tablepress tr:hover td” element entirely and included that bit of code in the “.tablepress .row-hover tr:hover td” element. Now the first row works as supposed—when there is no header. When there is a header it doesn’t but that is actually okay since a header is supposed to have a border for emphasis anyway.

    Here’s the code in case you’re interested:

    .tablepress {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    }

    .tablepress tbody td {
    border-color: #e5e5e5;
    }

    .tablepress .row-hover tr:hover td {
    background-color: #f8f8f8;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid #f8f8f8;
    color: #da0f47;
    }

    .tablepress thead th,
    .tablepress tfoot th {
    background-color: #ffffff;
    border-color: #e5e5e5;
    }

    .tablepress thead .sorting_asc,
    .tablepress thead .sorting_desc,
    .tablepress thead .sorting:hover {
    background-color: #f8f8f8;
    }

    Thread Starter jfbprivate

    (@jfbprivate)

    5 years ago

    To showcase I updated the page with two table versions: one with a header, a second one without.

    http://proud-chicken.w5.wpsandbox.pro/tablepress/

    Plugin Author TobiasBg

    (@tobiasbg)

    5 years ago

    Hi,

    you could try extending

    .tablepress .row-hover tr:hover td {

    to

    .tablepress thead tr:hover th,
.tablepress .row-hover tr:hover td {

    Regards,
    Tobias

    Thread Starter jfbprivate

    (@jfbprivate)

    5 years ago

    Thanks.

    That’s an interesting option to have.

    I just updated the page. But as you can see the first row’s top border still remains dark gray . . .

    Plugin Author TobiasBg

    (@tobiasbg)

    5 years ago

    Hi,

    sorry, I’m out of ideas here then…

    Regards,
    Tobias

    Thread Starter jfbprivate

    (@jfbprivate)

    5 years ago

    Yeah, me too. That’s why I’m gonna stick with the first option. It’s okay that way since the problem only occurs in tables with a header—and I’m fine with a visible border dividing the header from the rest of the table.

    Thank you for your efforts.

    Plugin Author TobiasBg

    (@tobiasbg)

    5 years ago

    Hi,

    no problem! Always happy to help!

    Best wishes,
    Tobias

Viewing 14 replies - 16 through 29 (of 29 total)
1 2
  • The topic ‘Visually Removing the Table Lines on Hover’ is closed to new replies.