CSS Error when insertin fake data into dataframe

[Alexandre_Choske]

Hi guys, im trying to render some rows into my dataframe, and this dataframe/table must have 7 static rows, even if my JSON I return the data from doesnt.

When I render the table with all the rows of the JSON and transform it, the table is rendered successfully by the CSS/HTML, as below:

But when I apply the fake data to fill in the remaining rows, the css just bug, and I cant find where is the problem

# Adicionar registros falsos se o total não for múltiplo do número de registros por página
remainder = totalRecords % records_per_page
if remainder != 0:
    fake_record_count = records_per_page - remainder
    fake_data = [{
        'fatura': "00/0000",
        'refcli': "",
        'modal': "nan",
        'origem': "",
        'dEmbarque': "",
        'dChegada': "",
        'dRegistro': "",
        'canal': "",
        'dEntrega': ""
    }] * fake_record_count
    fake_df = pd.DataFrame(fake_data)
    fake_df = fake_df.rename(columns={
        'fatura': 'REF UNIQUE',
        'refcli': 'REF IMPORTADOR',
        'modal':  'MODAL',
        'origem': 'ORIGEM',
        'dEmbarque': 'DATA EMBARQUE',
        'dChegada': 'DATA CHEGADA',
        'dRegistro': 'REGISTRO DI',
        'canal':'CANAL',
        'dEntrega': 'DATA ENTREGA'
    })
    dfRegistros = pd.concat([dfRegistros, fake_df], ignore_index=True)

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_modal, CANAL=image_formatter_canal))

    # Remover a classe 'dataframe' da tabela e adicionar a classe 'custom-table'
    df_html = df_html.replace('<table border="1" class="dataframe">', '<table class="custom-table">')

    # CSS customizado para a tabela
    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;
            text-align: center;
            font-weight: bold;
            font-size: 22px;
        }

        table.custom-table td {
            font-size: 20px;
            padding: 2px;
            text-align: center;
            font-weight: bold;
            border: none; 
            height: 72px;
        }

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

        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: 10px;
        }

        /* 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;
        }
    """

    # Adicionar o CSS e JavaScript ao HTML da tabela
    html_with_container = f"""
        <div class="table-responsive"> 
            <div class="table-body">
                {df_html}
            </div>
        </div>
        <style>
            {css}
        </style>
    """

    return html_with_container

# Converta o DataFrame da página atual em HTML
html_finished = convert_df(df)

# Renderize o HTML no Streamlit
st.write(f"{html_finished}", unsafe_allow_html=True)

Any help would be very appreciated, thanks!

[Alexandre_Choske]

When I try to debug the table in a simple:

st.table(dfRegistros)

the result is the expected, but with no css obvius.

[Alexandre_Choske]

I figured it out.

Actually my image conversion was bugging the “CANAL” column.

Change this

def image_formatter_canal(img_path: str) -> str:
    pixelsImage = 60
    try:
        return f'<img src="data:image/png;base64,{image_to_base64(image_path)}" style="width: {pixelsImage}px; height: {pixelsImage}px;">'
    except:
        return f'<img src="data:image/png;base64,{image_to_base64(GENERIC_IMG)}" style="width: 6{pixelsImage}px; height: {pixelsImage}px;>'

to this:

def image_formatter_canal(img_path: str) -> str:
    pixelsImage = 60
    try:
        return f'<img src="data:image/png;base64,{image_to_base64(GENERIC_IMG)}" style="width: {pixelsImage}px; height: {pixelsImage}px;">'
    except:
        return f'<img src="data:image/png;base64,{image_to_base64(GENERIC_IMG)}" style="width: 6{pixelsImage}px; height: {pixelsImage}px;>'