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

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

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