How to highlight columns when hovering on them in table

  • Resolved edavis10

    (@edavis10)


    8 months, 2 weeks ago

    Our table is a list of allergens and it would be very helpful if people could hover over the column and the highlight was like a cross when you moved your cursor so that you could follow one item across all allergens left to right, or follow one specific allergen from top to bottom if that makes sense.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi!

    Thanks for your post and sorry for the trouble!

    For this (should work at least in modern browsers), you could add this to the “Custom CSS” text area on the “Plugin Options” screen of TablePress:

    .tablepress {
    overflow: hidden;
    --hover-bg-color: #ffffaa;
}

.tablepress td,
.tablepress th {
    position: relative;
}

.tablepress td:hover::after { 
    background-color: var(--hover-bg-color);
    content: '\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}

    In addition, please make sure to turn off the “Alternating Row Colors” checkbox on the table’s “Edit” screen, as it interferes here (and your theme fortunately adds this effect anyways).

    Regards,
    Tobias

Viewing 1 replies (of 1 total)
  • The topic ‘How to highlight columns when hovering on them in table’ is closed to new replies.