Displaying newlines in streamlit table with border

Hi everyon,
i have seen a post Displaying newlines in streamlit table

I want to add a new border with each join “\n” like image below
can you help me for this case

You’ll need to add an HTML <hr> tag and some custom CSS styling to achieve a similar result.

import streamlit as st
import pandas as pd

data = {
    "Name": ["John Doe", "Jane Smith", "Bob Johnson"],
    "Description": [
        "line 1 /n line 2",
        "line 3 /n line 4",
        "line 5 /n line 6",
    ],
}

df = pd.DataFrame(data)

# Replace the \n with an HTML linebreak and a horizontal line
df = df.applymap(lambda x: x.replace('/n', '<br><hr>'))

# Inject custom CSS for styling the horizontal rule
st.markdown(
    """
    <style>
    hr {
        height: 1px;
        border-width: 0;
        color: gray;
        background-color: gray;
        width: calc(100% + 26px); /* Adjust width to account for padding */
        margin: 0;
        margin-left: -13px; /* Adjust margin to account for padding */
        margin-right: -13px; /* Adjust margin to account for padding */
    }
    </style>
    """,
    unsafe_allow_html=True,
)

# Show as a static table
st.markdown(df.to_html(escape=False), unsafe_allow_html=True)

3 Likes

Thank for your support!!
It’s helpfulf with me :heart_eyes: :heart_eyes:

Make sure to mark this question as resolved! Cheers :clinking_glasses:

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.