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_labels_border_* 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_labels_border_* 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.