Different rendering of a table on vscode jupyter interactive window and quarto html report

[ofajardo]

Description

My table renders differently on a VSCode Jupyter interactive window than on a quarto html report.

Reproducible example

I am trying to style my table in a similar style as tables here. I have tried this:

import pandas as pd
from IPython.display import display, HTML
from great_tables import GT, from_column, style, loc, html

groupnames = ["Gender, n (%)"]*2 + ["Age Group, n (%)"]*2 
rownames = ["Male", "Female", "18-45", "45-90"]
group1 = ["45 (45 %)", "55 (55%)", "20 (20%)", "80 (80%)"]
group2 = ["90 (45 %)", "110 (55%)", "40 (20%)", "160 (80%)"]

data = {'groupnames': groupnames,
    'rownames': rownames,
     'group1': group1,
     'group2': group2}

cols = {'group1': html("Group 1<br>(N=100)"), 
    'group2': html("Group 2<br>(N=200)")}

df = pd.DataFrame(data)
gt = (
GT(df, rowname_col="rownames", groupname_col="groupnames")
.tab_header(title="table 1", subtitle="stratified by group")
.tab_options(
    row_group_font_weight="bold",
    column_labels_font_weight="bold",
    column_labels_border_top_style="solid",
    column_labels_border_bottom_style="solid",
    column_labels_border_top_color="#000000",
    column_labels_border_bottom_color="#000000",
    row_group_padding_horizontal=50,
    )
.tab_style(
        style= [ style.fill(color="white"),],
        locations=loc.body(),
    )
.cols_label(**cols)
.cols_align(align="center")
)
gt

running this code on VScode (on a jupyter interative window) either from a .py file or a .qmd file gives me this appearance:

This is close to what I want, although I am intrigued on why the options column_labelsborder* and row_group_padding_horizontal seem to be ineffective. Maybe I am using them wrong?

Now, I render the quarto report as html, and in the resulting html I get this, which looks quite different from what I got in the interactive window.

Inspecting the html code, I see that the option data-quarto-disable-processing is set to false, which seems problematic. I could not find any way to change that in great_tables, so I change it manipulating the html directly:

gt_raw = gt.as_raw_html()
gt_raw = gt_raw.replace('data-quarto-disable-processing="false"', 'data-quarto-disable-processing="true"')
display(HTML(gt_raw))

In the interactive window the output looks the same. And now when rendering the quarto report it looks like this:

The zebra strips have disappeared, but I still have the gray borders, which I do not see in the interactive window. Inspecting gt_raw, I do see that indeed several style properties of the table are set to gray, for example:

.gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }

So, I guess that suggests that now the html report is correct and the VScode interactive window is not displaying correctly the borders? I tried to set table_border_top_color="#000000" and indeed in the html I can see that now the top border is black in the html, while in the interactive window I do not see any color.

Expected result

I would expect the appearance of the table to be the same in both outputs, that would help to make the development quicker, since apparently now I have to change properties and render the html to inspect the result.

While writing this, I realize that it may be a problem of VScode rather than great_tables, but it would be nice to have some solution or workaround.

Is it possible for instance to disable all borders at once in great_tables?

Another thing is that it should be possible to set data-quarto-disable-processing from python.

Finally some properties like column_labelsborder* seem to not be working in my example.

Any suggestions would be appreciated, thanks a lot for your help!

Development environment

• Operating System: ubuntu 22.04
• great_tables Version: 0.7.0
• VScode version: 1.89.1
• quarto version: 1.4.551

Additional context

Add any other context about the problem here.

[machow]

@rich-iannone we often set html-table-processing: none in the qmd top-matter, but this need is undocumented in Great Tables. Do you mind finding a place to document this, and to expose how people should resolve it?

It looks like there's an option but it's no possible to set anywhere

https://github.com/posit-dev/great-tables/blob/5a67bee055625ac80141f6e65836119d9a333420/great_tables/_gt_data.py#L1121

[ofajardo]

Apparently the issue with the VSCode interactive window not showing table borders has been described before: https://stackoverflow.com/questions/78162666/adding-borders-to-visual-studio-code-jupyter-notebook-table-rendering

[ofajardo]

The borders issue maybe even solved on github: https://github.com/microsoft/vscode/issues/210462

[machow]

Ah, thanks for digging up that vs code issue! The !important stuff would take a lot of aggressive css to override, so this would be a huge improvement for us

[ofajardo]

thanks for the html-table-processing: none suggestion, that works! Still, I think it would be good to be able to control it from great_tables, the user may want to inactivate the processing only for the GT object and not for the whole document.

[ofajardo]

what I am still struggling with is how to remove the gray borders everywhere on the table, whatever properties I try from here seem ineffective (except maybe the table top and bottom border). When I inspect the table in the browser and start playing with the styles can overwrite those gray borders with something else for the top and bottom of the table, but cannot change all the other internal borders, they seem to be really fixed and I cannot understand where they are inheriting from.