How to change hover row color for ui.table?

[tz301]

Question

The default cover seems grey, how to change it when using ui.table?

[falkoschindler]

Hi @tz301,

You can add some custom CSS to change the hover color:

ui.add_css('''
    .q-table tbody tr:hover {
        background-color: #0088ff11 !important;
    }
''')

[tz301]

Yeah, that works. But it change all my table style, is there anyway to change only one of my table?

[falkoschindler]

Sure, you can address individual elements with custom classes:

ui.add_css('''
    .my-table tbody tr:hover {
        background-color: #0088ff11 !important;
    }
''')
ui.table(rows=[{'name': 'Alice'}, {'name': 'Bob'}, {'name': 'Carol'}]).classes('my-table')

[tz301]

Thanks