Decrease Height of WP List Table Rows in WordPress using CSS

The row height of a WordPress list table shows a lot of empty space so that the row actions (Edit, Quick Edit, Trash) can show on hover. Here is a snippet of CSS to reduce the height of the row until the user hovers over it.

You can change the max-height to suit. You can also prepend a qualifying selector that matches the post type class. For example, if you only want to modify the list view for a post type called az_books, you could change the selectors by prepending .post-type-az_books to all of them. So .row-actions becomes .post-type-az_books .row-actions. (Make sure there is a space after the post type.) Do this to all three of the selectors.

Unfortunately, changing the row height on hover to ‘auto’ doesn’t work so you have to specify a height. You can wrap the snippet in a media query so that it only applies to large screens or have more than one snippet to apply to different screen sizes.

    .row-actions{
        max-height: 0; 
        display:none;
    }
    .row-actions{
        transition: max-height .2s ease, display .5s ease, left .5s ease;
    }
    .has-row-actions:hover .row-actions{
        max-height: 70px;
        display:block
    }