# Table Block Styles: Lined Rows and Hover Highlight

> Adds two table styles: "Lined" with thin row dividers and no outer borders, and "Hover rows" that highlights the row under the mouse for easier reading.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: block-styles, tables, design
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/block-styles-tables/

## Code

```php
add_action( 'init', function () {
    register_block_style( 'core/table', array(
        'name'         => 'wpide-lined',
        'label'        => 'Lined',
        'inline_style' => '.wp-block-table.is-style-wpide-lined td,.wp-block-table.is-style-wpide-lined th{border:0;border-bottom:1px solid rgba(0,0,0,.12);padding:.7em .5em;}.wp-block-table.is-style-wpide-lined thead{border-bottom:2px solid currentColor;}',
    ) );

    register_block_style( 'core/table', array(
        'name'         => 'wpide-hover-rows',
        'label'        => 'Hover rows',
        'inline_style' => '.wp-block-table.is-style-wpide-hover-rows tbody tr{transition:background-color .15s ease;}.wp-block-table.is-style-wpide-hover-rows tbody tr:hover{background-color:rgba(0,0,0,.05);}',
    ) );
} );
```

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Table Block Styles: Lined Rows and Hover Highlight" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/