Graphviz渲染HTML标签表格列宽效果与浏览器不一致如何解决

问题描述 #

现有如下dot代码，使用Graphviz渲染时表格列内存在多余空白，和浏览器渲染同段HTML表格的效果存在差异：

digraph structs {
node [shape=plaintext]
struct1 [label=<
<table border="1">
    <tr>
        <td align="left">
            <TABLE  border="1">
                <TR>
                    <TD align="left">one</TD>
                    <TD align="left">long text here</TD>
                    <TD align="left">c</TD>
                </TR>
            </TABLE>
        </td>
    </tr>
    <tr>
        <td align="left">
            <TABLE  border="1">
                <TR>
                    <TD align="left">very long text present here</TD>
                    <TD align="left">colb</TD>
                    <TD align="left">colc</TD>
                </TR>
            </TABLE>
        </td>
    </tr>
</table>
>];
}

渲染效果差异：

• Graphviz渲染原代码：各列内部存在多余空白，列宽未按内容自适应收缩
• 浏览器渲染同一段HTML表格：列宽自适应内容宽度，多余空白仅出现在最后一列后方，符合预期

问题解答 #

1. 原生配置可行性说明 #

Graphviz实现的是简化版类HTML标签渲染逻辑，并非完整的浏览器HTML渲染引擎。它的表格列宽计算规则为：同索引列取所有行对应列的最大宽度为基准，默认会给所有列均匀分配额外横向空间，目前没有提供任何配置项可以修改这一分配逻辑，无法仅通过参数配置实现和浏览器完全一致的渲染效果。

2. 可实现预期效果的标签编写方式 #

列内多余空白的根源是原代码嵌套了三层独立表格结构，每个独立表格都会单独计算列宽、均匀分配内部空间。只需要去掉冗余的嵌套表格，将所有行放在同一个<table>节点下，显式指定表格边距属性即可，修改后的代码如下：

digraph structs {
node [shape=plaintext]
struct1 [label=<
<table border="1" CELLBORDER="1" CELLSPACING="0" CELLPADDING="4">
    <tr>
        <td align="left">one</td>
        <td align="left">long text here</td>
        <td align="left">c</td>
    </tr>
    <tr>
        <td align="left">very long text present here</td>
        <td align="left">colb</td>
        <td align="left">colc</td>
    </tr>
</table>
>];
}

修改后渲染的效果：

• 列宽自动适配每列的最长内容，不会在列内生成多余空白
• 单元格内容保持左对齐
• 所有多余横向空白都会出现在表格最后一列的右侧，和浏览器渲染效果一致

如果业务场景必须保留嵌套表格结构，可以手动给每个内层单元格添加WIDTH属性指定适配内容的固定宽度，不过这种方案需要手动测量内容宽度，适配成本较高，非必要不推荐。

内容的提问来源于stack exchange，提问作者ams1