How to customize the width/location of an HTML table?

So I have this HTML table:

.py

players['Position'] = players['Position'].map(position_mapping)
columns_to_display = ['Rating', 'Player', 'Position', 'Age', 'Value', 'Wages', 'Contract', 'Link']
st.markdown(
    """
    <head>
        <link rel="stylesheet" type="text/css" href="./styles.css">
    </head>
    """,
    unsafe_allow_html=True
)
html = players[columns_to_display].to_html(escape=False, index=False, classes='custom-table')
html = html.replace('<th>', '<th style="text-align: left;">')
st.write(html, unsafe_allow_html=True)

.css

.custom-table {
    margin-top: 5px;
    width: 10%;
}

My goal is to use CSS to adjust the location and width of the table in my page. Locating the table closer to the top, and making it wider.

Can someone help me do that?

Check out static file serving.