Why, based on HTML table id, do I observe different displayed output in a jupyter notebook? For instance, the names "ab" and "a.b" are different

Question

I have the following python code in a jupyter notebook.

from IPython.core.display import HTML
html_id = 'ab'  # applies my formatting
html_id = 'a.b'  # doesn't apply my formatting

table_html = ''
table_html = f'''
<style>
    th#{html_id} {{
        background: #C9C9C9;
        padding: 5px;
        font_weight:normal;
    }}
    table#{html_id} {{
        font-family: sans-serif;
    }}
    </style>
'''
table_html += f'''
    <table id="{html_id}">
    <thead>
        <tr id="{html_id}">
            <th id="{html_id}" colspan=1> 
                <b> xyz </b> 
            </th>
        </tr>
    </thead>
    <tbody>
    <tr id="{html_id}"> <td> text </td> </tr>
    </tbody>
    </table>
'''
HTML(table_html)

Depending on the html_id I provide, the displayed HTML either applies my formatting, or doesn't, as shown in the screenshots below. What might be the cause of this?