How to add hoverable rows in tables

18 Feb, 2026

This post was written for the Grizzly Gazette's Bearblog Creation Festival.

Bear Blog supports tables with optionally aligned columns in Markdown. As always, tables are easily customizable with CSS.

Since the default table style looks too plain for me, it has been replaced with my custom design that matches the blog's appearance. My table style has thin and solid borders, as well as colored headers and hoverable rows. It even has an inverted color palette on dark mode!

Base styling for the table

table {
    width: 100%;
    border-collapse: collapse;
}

thead th, td {
    border: 1px solid #336d80;
    padding: 10px;
}

thead {
    background-color: #336d80;
    color: #f2f2f2;
}

thead th::selection {
    background-color: #f2f2f2;
    color: #336d80;
}

Hoverable rows

As I want tables to be accessible as possible, I have added :hover right after tbody tr (the rows within the table's body). That way, anyone can point to a specific row in any table easily.

tbody tr:hover {
    background-color: #6b9fb1;
    color: #f2f2f2;
}

Dark mode

@media (prefers-color-scheme: dark) {
    thead th, td {
        border: 1px solid #f2f2f2;
        padding: 10px;
    }
    
    thead {
        background-color: #f2f2f2;
        color: #336d80;
    }
    
    thead th::selection {
        background-color: #336d80;
        color: #f2f2f2;
    }

    tbody tr:hover {
        background-color: #c2d9e1;
        color: #336d80;
    }
}

Demo

Since Pokémon Day¹ is approaching, I decided to make a table (which now uses my custom styling) of all spray-type items that heal a Pokémon's HP.² The following details are taken from Bulbapedia.

Anyway, just move your cursor (on desktop) or tap anywhere within the table (on mobile) to see the hoverable rows in action.

Feel free to use my code snippets and tweak them to fit your blog's theme!

#challenges #how-to