Styling th and td Together leads to Inconsistent Results

[hub-il]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

# MARK: IMPORTS
from nicegui import ui, app

@ui.page('/')
def refreshable_page():

    from components.system_status import get_system_status_list, get_system_status_item
    # https://nicegui.io/documentation/query#modify_default_page_padding
    ui.query('.nicegui-content').style('padding-left: 5px; padding-right: 5px; padding-top: 5px;')

    # MARK: ADD HEAD HTML
    ui.add_head_html('''
        <style>

            // inconsistent results when combining th, td in the same rule
            .status-table table { border-collapse:separate; border-right: 0px solid !important;}  
            .status-table th, td { height: 30px; background-color: red;  border-right: 1px solid ; border-collapse: collapse; border-color: rgba(0, 0, 0, 0.12);} 
                     
            // consistent results when seperated into their own rules
            //.status-table td { height: 30px; background-color: red;  border-right: 1px solid ; border-collapse: collapse; border-color: rgba(0, 0, 0, 0.12);} 
            //.status-table th { background-color: red;  border-right: 1px solid ; border-collapse: collapse; border-color: rgba(0, 0, 0, 0.12);} 
            
            .dialog-header-table table { border-collapse:separate; border-right: 0px solid !important;}
            // inconsistent results when combining th, td in the same rule
            .dialog-header-table th, td { background-color: blue;  border-right: 1px solid ; border-collapse: collapse; border-color: rgba(0, 0, 0, 0.12);} 
            
            // consistent results when seperated into their own rules
            //.dialog-header-table td { background-color: blue;  border-right: 1px solid ; border-collapse: collapse; border-color: rgba(0, 0, 0, 0.12);} 
            //.dialog-header-table th { background-color: blue;  border-right: 1px solid ; border-collapse: collapse; border-color: rgba(0, 0, 0, 0.12);}
            
                     
        </style>
    ''')

    with ui.column().classes('w-[50%]'):

        columns = [
            {'name': 'name', 'label': 'Name', 'field': 'name'},
            {'name': 'age', 'label': 'Age', 'field': 'age'},
        ]
        rows = [
            {'name': 'Alice', 'age': 30},
            {'name': 'Bob', 'age': 25},
        ]

        ui.table(columns=columns, rows=rows).classes('w-[100%] status-table')

    with ui.column().classes('w-[50%]'):

        columns = [
            {'name': 'name', 'label': 'Name', 'field': 'name'},
            {'name': 'age', 'label': 'Age', 'field': 'age'},
        ]
        rows = [
            {'name': 'Alice', 'age': 30},
            {'name': 'Bob', 'age': 25},
        ]

        ui.table(columns=columns, rows=rows).classes('w-[100%] dialog-header-table')

if __name__ in {"__main__", "__mp_main__"}:

    # MARK: UI.RUN
    ui.run(reload=True)

Description

I am trying to style two tables on the same page differently. One in a dialog and the other in the content area. I am using the suggested way to style tables as suggested in #885.

When I combine the styles for the table header and table cell using th, td I get inconsistent results in what gets styled. If I sperate the style for th and td in separate styles then the styles appear to get applied as expected.

TLDR: having two tables where th and td are styled together (e.g., .status-table th, td {}) results in inconsistent application of the rules.

NiceGUI Version

3.2

Python Version

3.13

Browser

Edge

Operating System

Linux

Additional Context

No response

[falkoschindler]

Hi @hub-il,

This seems to a be a misconception of how CSS works. Let me post an AI-generated explanation:

---

In CSS, commas split a selector list into completely independent selectors.
So:

.status-table th, td { … }

means “apply the rules to:

1. any th that’s a descendant of an element with class status-table, and
2. every td in the entire document.”

If the intent is to style only the cells inside .status-table, you must scope both parts:

/* Correctly scoped */
.status-table th,
.status-table td {
  /* styles */
}

A slightly shorter, equivalent form is:

.status-table :is(th, td) {
  /* styles */
}

(Use :is() only if you don’t need to support very old browsers.)

If you also want different rules for header vs body cells, be explicit:

.status-table thead th { /* header styles */ }
.status-table tbody td { /* body styles */ }

Tip: if you saw unexpected styles “leaking” to other tables, it’s because td in .status-table th, td isn’t scoped—DevTools will show the rule applying to unrelated tds.