great_tables 默认忽略 HTML 中的空白符，导致蛋白质序列比对等需严格对齐的文本错位；解决关键在于用 标签包裹内容、禁用换行压缩，并配合 CSS 控制字体与列宽。
great_tables 默认忽略 html 中的空白符，导致蛋白质序列比对等需严格对齐的文本错位；解决关键在于用 `
` 标签包裹内容、禁用换行压缩，并配合 css 控制字体与列宽。</p><p>在使用 <code>great_tables</code> 渲染蛋白质序列比对（如 Clustal/Water-style 对齐）时，常见痛点是：尽管 Python 字符串中已通过空格、制表符或右对齐（<code>str.rjust()</code>）精心排版，但最终 HTML 表格中所有多余空白均被浏览器自动折叠——这是 HTML 渲染引擎的默认行为（即“whitespace collapsing”），与 <code>fmt_markdown()</code> 或 <code>cols_width()</code> 无关。</p><p>✅ 正确解法是<strong>绕过 Markdown 解析，直接注入保留空白的 HTML 片段</strong>。核心技巧有三：</p><ol><li><strong>使用 <code><pre class="brush:php;toolbar:false;"></code> 标签</strong>：强制浏览器按源码格式渲染，保留空格、缩进和换行； </li><li><strong>搭配 <code>white-space: pre; font-family: monospace;</code></strong>：确保等宽字体 + 禁止自动换行； </li><li><strong>用 <code>html()</code> 格式化器替代 <code>fmt_markdown()</code></strong>：<code>great_tables</code> 支持原生 HTML 渲染（见 <a href="https://www.php.cn/link/0f210c2f9e9c787e0f120a2472a53302" rel="nofollow" target="_blank" >官方测试用例</a>）。</li></ol><p>以下为可直接运行的完整示例：</p><pre class="brush:php;toolbar:false;">from great_tables import GT, html
import pandas as pd
def write_alignment_string(seq_top, seq_bot):
ref_id = "Right_justfied_ID"
second_id = "second_ID_NUM"
# 构建带精确空格的对齐字符串（注意：此处用 \t 或空格均可，<pre class="brush:php;toolbar:false;"> 会保留）
aligned_text = f"""{ref_id:>30}: {seq_top}
{' ' * 30} {seq_bot.lower()}
{second_id:>30}: {seq_bot}
{' ' * 30}: Additional annotation---"""
# 封装为 <pre class="brush:php;toolbar:false;"> 块，指定等宽字体与样式
return html(f'<pre class="brush:php;toolbar:false;" style="font-family: \'Courier New\', monospace; white-space: pre; margin: 0; padding: 4px; background: #f8f9fa; border-radius: 3px;">{aligned_text}')
# 构造示例数据
df = pd.DataFrame({
"pat_id": ["P001", "P002"],
"Alignment": [
write_alignment_string("ABCDEFG-LONG-SEQUENCE-OF-AMINO-ACIDS", "abcdefg-long-sequence-of-information"),
write_alignment_string("AACDeFF-LONG-SEQUENCE-NUMBER-2-ofAAS", "aAcDeFf-long-seq-num-2-of-aas")
]
})
# 创建 GT 表并应用 HTML 格式化（非 fmt_markdown！）
gt = (
GT(df)
.cols_width({"Alignment": "500px"}) # 设置足够宽的列容器
.tab_style(
style=html(""),
locations="body"
)
.fmt_html(columns="Alignment") # ✅ 关键：用 fmt_html 而非 fmt_markdown
)
gt
⚠️ 注意事项：
- ❌
fmt_markdown()会将<pre class="brush:php;toolbar:false;"></pre>当作普通 Markdown 解析，可能失效或转义；务必改用fmt_html()； - ❌
cols_width()仅控制<td> 宽度，不改变内部文本渲染逻辑——必须配合 <code><pre class="brush:php;toolbar:false;"></pre>+white-space: pre； - ✅ 若需响应式适配，可将
pre替换为<div style="white-space: pre; font-family: monospace; overflow-x: auto;"> 并添加水平滚动；<li>? 调试技巧：右键表格单元格 → “检查元素”，确认生成的 HTML 中是否包含未被转义的 <code><pre class="brush:php;toolbar:false;"></pre>及内联样式。
总结：great_tables 的 HTML 渲染能力强大但需精准调用。面对空格敏感型生物信息学文本（如序列比对、结构图谱、多行注释），放弃 Markdown 依赖，拥抱 <pre class="brush:php;toolbar:false;"></pre> + fmt_html() 是最稳定、最可控的方案。
