CSS not applying on server, but local is fine

[Alexandre_Choske]

Hi guys, im running my streamlit on local, trying to render an HTML table.

On local run, the table runs everything perfectly, see the above CSS:

im using an CSS applied directly to the render table, like this:

    def convert_df(input_df):
        # Formatar as colunas MODAL e CANAL com a função image_formatter
        df_html = input_df.to_html(index=False, escape=False, formatters=dict(MODAL=image_formatter, CANAL=image_formatter))
        # Remover a classe 'dataframe' da tabela
        df_html = df_html.replace('<table border="1" class="dataframe">', '<table class="custom-table">')
        
        css = """                    
            table.custom-table {
                border-collapse: collapse;
                width: 100%;
                table-layout: auto;
            }

            table.custom-table thead {
                background-color: #404041; 
                color: white;
            }

            table.custom-table thead th {
                border: none; 
                padding: 5px; /* Ajustar conforme necessário */
                text-align: center;
                font-weight: bold; /* Negrito no cabeçalho */
                font-size: 18px; /* Tamanho da fonte do cabeçalho (ajuste conforme necessário) */
            }

            table.custom-table td {
                font-size: 14px; /* Tamanho da fonte das linhas (ajuste conforme necessário) */
                padding: 5px; /* Ajustar conforme necessário */
                text-align: center;
                font-weight: bold; /* Negrito nas linhas */
                border: none; 
                height: 72px; /* Altura fixa para as linhas da tabela */
            }

            /* Primeira coluna com ícones */
            table.custom-table td:first-child {
                width: 150px;
                height: 72px;
            }

            /* Ícones */
            table.custom-table td:first-child img {
                width: 100%; 
                height: 100%; 
                object-fit: cover;
            }

            table.custom-table tbody tr {
                background-color: #165672; 
                color: white;
                border-bottom: 10px solid #404041;
            }

            /* Coluna 'NUM' */
            table.custom-table td:nth-child(2) {
                width: 20px; /* Ajustar conforme necessário */
            }

            /* Coluna 'CANAL' */
            table.custom-table td:nth-child(9) {
                width: 15px; /* Ajustar conforme necessário */
                height: 15px; /* Ajustar conforme necessário */
            }

            /* Remover bordas laterais entre colunas */
            table.custom-table td, table.custom-table th {
                border-left: none;
                border-right: none;
            }

            /* Remover bordas laterais entre linhas */
            table.custom-table tr {
                border-left: none;
                border-right: none;
            }
        """
        
        html_with_container = f"""
            <div class="table-responsive"> 
                <div class="table-body">
                    {df_html}
                </div>
            </div>
            <style>
                {css}
            </style>
        """
        return html_with_container

But when I deploy the app to heroku servers, the CSS dont apply at all.

I can change the hight of the column in the html console.

What am I missing here?