HTML formatting leads to global change

[ACD-1]

First Check

• I added a very descriptive title here.
• This is not a Q&A. I am sure something is wrong with NiceGUI or its documentation.
• I used the GitHub search to find a similar issue and came up empty.

Example Code

# Kompaktes Styling
ui.add_head_html('''
<style>
.q-table__container {border: none !important; box-shadow: none !important;}
.q-table th, .q-table td {border: none !important;text-align: left !important;                             padding: 2px 8px !important;font-size: 13px !important;                                line-height: 1.1 !important; height: 24px !important;                                font-weight: bold !important;}
.q-table thead {display: none !important;}
</style>
''')

Description

I use many tables in my program. Some without frames, just for aligning text.
In version 2, you could format each table individually using ui.add_head_html. After updating to 3.0.4, changes made using ui.add_head_html are applied globally to all tables, regardless of whether they are in a function or not.

NiceGUI Version

3.0.4

Python Version

3.12

Browser

Firefox

Operating System

Linux

Additional Context

No response

[evnchn]

Hello @ACD-1. Thanks for the report.

Would appreciate more details since I am not sure what "functions" your code are in.

Also would appreciate to have the actual table in your code.

Thanks!

[amks1]

@ACD-1 the right way to do this would be to use a custom class on your tables and constrain your css styles with the custom class.

ui.table().classes('mytable')

ui.add_css('''
    .mytable .q-table__container {border: none !important; box-shadow: none !important;}
    .mytable .q-table th, .q-table td {border: none !important;text-align: left !important; padding: 2px 8px !important;font-size: 13px !important; line-height: 1.1 !important; height: 24px !important; font-weight: bold !important;}
    .mytable .q-table thead {display: none !important;}
''')