What am I missing with this white border around the entire table image?

[HansMellman]

Just a little help on why I've got this white border around the entirety of my table image upon saving. I use the dark theme in VSCode and when viewing the table, prior to saving the image, it fills it's allocation right up to the edges, however when viewing the .png after saving it has a white border around it - am I missing something in my code?

(
    GT(sc)
    .tab_header(
        title=md("<img src='https://i.imgur.com/xJYzCF8.png' width='90' height='90' style='vertical-align: middle;'> &#x1F3C8; **Analysis by Position Group** &#x1F3C8; <img src='https://i.imgur.com/xJYzCF8.png' width='90' height='90' style='vertical-align: middle;'>"), ## add small footballs to the title. ## these characters cause issues when saving. 
        subtitle=md("_**2063 Regular Season**_")
    )
    .fmt_image(
        columns='Team',
        path=analysis_path,
        file_pattern="{}.png"
    )
    .cols_align(
        align="center", columns=None
    )
    .cols_label(
        Team = (" "),
        Position_Group = (" "),
        Intelligence = ("Intel"),
        Performance_Grade = ("Performance"),
        Current_Overall = ("Current"),
        Future_Overall = ("Future"),
        PenaltiesCommitted = ("Penalties"),
        Pedigree_Percentage = ("Pedigree"),
        Intelligence_vs_league_avg = ("Int"),
        PenaltiesCommitted_vs_league_avg = ("Pen"),
        Performance_Grade_vs_league_avg = ("Perf"),
        Current_Overall_vs_league_avg = ("Curr"),
        Future_Overall_vs_league_avg = ("Fut"),
        Experience_vs_league_avg = ("Exp"),
        Pedigree_Percentage_vs_league_avg = ("Pedigree")
    )
    .tab_options(
        container_width = "100%",
        heading_background_color="#990033",
        table_border_top_color="#990033",
        table_font_names="Calibri",
        table_font_size="20px"
    )
    .tab_style(
        style=style.fill(
            color=map_colour_analysis),
        locations=loc.body("Position_Group")
        )
    .tab_style(
        style=style.text(
            color=text_colour_analysis),
        locations=loc.body("Position_Group")
        )
    .tab_spanner(
        label=md('**Cumulative**'),
        columns=['PenaltiesCommitted', 'Pedigree_Percentage']
    )
    .tab_spanner(
        label=md('**Group Averages**'),
        columns=['Intelligence', 'Performance_Grade', 'Current_Overall', 'Future_Overall', 'Experience']
    )
    .tab_spanner(
        label=md('**Versus League Average**'), ### MAYBE THE ORDER HERE NEEDS TO BE CHANGED TO HAVE PENALTIES SECOND LAST LIKE THE LEFT HAND COLUMNS?
        columns=['Intelligence_vs_league_avg', 'Performance_Grade_vs_league_avg', 'Current_Overall_vs_league_avg', 'Future_Overall_vs_league_avg', 'Experience_vs_league_avg','PenaltiesCommitted_vs_league_avg', 'Pedigree_Percentage_vs_league_avg']
    )
    .fmt_percent(['Intelligence_vs_league_avg', 'PenaltiesCommitted_vs_league_avg', 'Performance_Grade_vs_league_avg', 'Current_Overall_vs_league_avg', 'Future_Overall_vs_league_avg', 'Experience_vs_league_avg', 'Pedigree_Percentage_vs_league_avg'], decimals=1, drop_trailing_zeros=True, scale_values=False)
    .data_color(
        columns=['Intelligence_vs_league_avg', 'Performance_Grade_vs_league_avg', 'Current_Overall_vs_league_avg', 'Future_Overall_vs_league_avg', 'Experience_vs_league_avg', 'Pedigree_Percentage_vs_league_avg'],  # Target the "Diff" column
        palette=["#FF0000", "#FFFF00", "#00FF00"],  # Red to green gradient
        domain=None  # Automatically inferred from data
    )
    .data_color(
        columns=['PenaltiesCommitted_vs_league_avg'],
        palette=["#FF0000", "#FFFF00", "#00FF00"],  # Red to green gradient,
        domain=None,
        reverse=True
    )
    .tab_style(
        style=[
            style.fill(color="#EDEDED"),
            #style.text(weight="bold")
        ],
        locations=loc.body(columns=['Intelligence', 'Performance_Grade', 'Current_Overall', 'Future_Overall', 'Experience'])) ## Does colouring and bolding actually help?
    .tab_style(
        style=[
            style.fill(color="#F7F7F7"),
        ],
        locations=loc.body(columns=['PenaltiesCommitted', 'Pedigree_Percentage'])
    )
)#.save("SC_Analysis.png", selector='table', scale=2.0, expand=0, web_driver='chrome', window_size=(6000, 6000), debug_port=None, _debug_dump=None)

[machow]

Hey, removing the padding around the table is a bit tricky, due to various quirks across browsers (and more quirks in how they run
in headless mode). I think in this case, the border is likely due to two pieces:

• Browsers by default put a small amount of padding, etc.. around divs (or on the inside of the <body> )
• We have a small "crud_factor" variable that adds a few pixels width. The main reason for this is that...
  • borders can affect the width of elements
  • if we make the screen too narrow, then text can end up wrapping

I think some of this could be fixed (e.g. by disabling some of the body padding, margins, etc.. via css, and maybe using the css border-box setting). But it's a bit finicky getting everything right across browsers, so we opted for a small margin of space for robustness.

As a work-around, you could open the image, and trim down the margins in a tool like PIL (which we use to save pngs). I realize it's not ideal, but the risk of us trying to tighten up the capture is cropping out part of the table 😓.

(I definitely think someone more knowledgeable in all things headless browsers x css x layout quirks could get the framing a bit tighter..)

[HansMellman]

Thanks a lot for the response - It's a very minor thing so no worries, I've been loving the usage I've gotten from the package so far!