Having trouble in posit great_tables formatting with whitespace sensitive text , fmt_markdown, cols_width ignored

Question

I am using the great_tables python library from Posit and am trying to format some long text for a particular column in a html table derived from a pandas DataFrame inside a Jupyter Notebook .

The text represents a Protein Sequence alignment and these are best showed with a fixed width font and with column width larger than the length of the alignment , so the matched sequences, often in upper and lower case and other symbols lie on top of each other.

However I cannot get great_tables to format the sequences correctly in the output. I am wondering how to control the way whitespace or the col_width is assigned, because it seems to be overridden

The output format ideally lays out a string with the alignment information within a great_tables cell:

..........Right_justfied_ID : ABCDEFG-LONG-SEQUENCE-OF-AMINO-ACIDS
............................. abcdefg-long-sequence-of-information
...............second_ID_NUM: AACDeFF-LONG-SEQUENCE-NUMBER-2-ofAAS
............................: Additional annotation information---

I am currently formatting the string in python within the cell, but when they are rendered in the table , despite using a fixed width font. The final text seems to ignore whitespace and messes up the layout within the cell.


def create_dummy_dataframe_mkdown(num_elements = 100):
    pat_id = []
    seq_top = create_random_aa_seq(150)
    seq_bot = []
    ali = []
    for i in range(num_elements):
        pat_id.append(create_dummy_pat_ids())
        seq_bottom_new = mutate_sequence_randomly(seq_top)
        seq_bot.append(seq_bottom_new)
        ali.append(write_alignment_string_mkdown(seq_top, seq_bottom_new))  
    data ={"pat_id": pat_id, "seq_bot":seq_bot , "Alignment": ali}
    return pandas.DataFrame(data)

# Create DataFrame with alignment

df_mkdown = create_dummy_dataframe()

# Now creating the great_tables
gt_mkdown = GT(df_mkdown)
gt_mkdown.cols_width(cases={"Alignment":"3000px"}).fmt_markdown(columns="Alignment")

No matter what I try , the markdown table or the cols_width overrules the white space. I even tried not using markdown and still the whitespace still required to make everything align was not included in the cell. Please can you help me troubleshoot. A more suitable working example is at this gist: https://gist.github.com/harijay/177caf12d312b22a93a540a08c03713f

Thanks for all the answers. I got this to work by using the CSS div method suggested by @8349697 . The working example is posted at this gist gist.github.com/harijay/e08ed2a901e8181a50a7bb93923c9d11 — harijay
– harijay, Commented Mar 22 at 13:17

8349697 · Accepted Answer · 2025-03-21 11:28:46Z

The package does not yet support rendering a Markdown table to an HTML table.

However, as we can see from the tests and official docs, it is possible to insert your own html/css code. Either as a string or using special methods.

Whitespaces are ignored in HTML by default. But with the <pre> tag, you can add text exactly as it is written.

For example:

def write_alignment_string_mkdown(seq_top , seq_bot):
    ref_id = create_mock_id()
    outstring = f"""<pre>{ref_id:>30}:\t{seq_top}\n{" "*30}:{seq_bot.lower()}\n{create_mock_id():>30}:\t{seq_bot}</pre>"""
    outstring1 = f"""
    <div>
    <span style="display: block;">{ref_id}</span>
    <span style="display: block;">{seq_top}</span>
    <hr style="color: #D3D3D3; border: none; border-bottom: dashed 1px;">
    <span style="display: block;">{create_mock_id()}</span>
    <span style="display: block;">{seq_bot}</span>
    </div>"""
    outstring2 = f"""
    <table style="width: 100%">
    <tr>
    <td style="width: 200px; vertical-align: text-top; text-align: right; border: 1px solid #D3D3D3;" rowspan="2">{ref_id}</td>
    <td style="border: 1px solid #D3D3D3;" rowspan="2">{seq_top}</td>
    </tr>
    <tr><td></td><td></td></tr>
    <tr>
    <td style="width: 200px; vertical-align: text-top; text-align: right; border: 1px solid #D3D3D3;" rowspan="2">{create_mock_id()}</td>
    <td style="border: 1px solid #D3D3D3;" rowspan="2">{seq_bot}</td>
    </tr>
    <tr><td></td><td></td></tr>
    </table>"""
    return outstring

Primea · Accepted Answer · 2025-03-22 07:23:14Z

2

Your gist code looks solid for generating the data, but the Markdown approach in write_alignment_string_mkdown is tripping up the whitespace control in great_tables. Since you’re pre-formatting the alignment string, Markdown rendering and HTML’s default whitespace collapsing are overriding your layout. Here’s a tweak to the answer based on the gist:


from great_tables import GT, style, loc
import pandas as pd

# Assuming create_dummy_dataframe_mkdown() is defined elsewhere
df = create_dummy_dataframe_mkdown()

gt = (
    GT(df)
    .cols_width({"Alignment": "3000px"})  # Wide column
    .tab_style(
        style=style.text(font="Courier New, monospace", whitespace="pre"),
        locations=loc.body(columns="Alignment")
    )
)
gt.show()

The "white-space": "pre" keeps your spaces intact, and "Courier New, monospace" ensures a fixed-width font so your alignments stack nicely. Skip fmt_markdown here—it’s not needed since you’re pre-formatting the string in Python. Try it with this tweak—it should line up those sequences like you want! If it’s still off, tweak the pixel width or add padding via CSS. Let me know how it goes!

edited Mar 22 at 7:23

answered Mar 21 at 9:24

Primea

537 bronze badges

3 Comments

Christoph Rackwitz Mar 21 at 10:49

Hi! What tools do you use to author your answers?

Primea Mar 21 at 17:12

I ask grok to fix my grammar (english is not my first language) and then i use the stack overflow tool to select what parts are code or not.

8349697 Mar 22 at 6:26

tab_style works like this. Update your code so it can be run.

Collectives™ on Stack Overflow

Having trouble in posit great_tables formatting with whitespace sensitive text , fmt_markdown, cols_width ignored

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related