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.
Opens WPIDE on
Code
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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.