如何解决Bokeh DataTable单元格垂直对齐不一致问题

解决方法 #

出现垂直对齐不均的核心原因有两点：

• 你自定义的HTMLTemplateFormatter中使用的<p>标签默认自带上下外边距，和未使用自定义格式化器的CL1列默认文本样式（无边距、固定行高）不一致
• 所有列没有统一设置垂直对齐规则

你只需修改模板的样式，同时可选给CL1列也套上统一格式的模板即可解决问题，修改后的完整代码如下：

from bokeh.io import output_notebook, show
output_notebook()

from random import randint
from bokeh.io import output_file, show
from bokeh.models import ColumnDataSource, Column
from bokeh.models.widgets import DataTable, TableColumn, HTMLTemplateFormatter

output_file("data_table.html")

data = dict(
    cola=[randint(0, 100) for i in range(10)],
    colb=[randint(0, 100) for i in range(10)],
    colc=['█' for i in range(10)])

source = ColumnDataSource(data)

# 统一所有列的模板样式，去掉p标签默认边距，增加垂直对齐配置
common_template="""                
            <p style="margin:0;padding:0;vertical-align:middle;line-height:1.2;color:<%= 
                (function colorfromint(){
                    if (1 < Math.abs(cola - colb) && Math.abs(cola - colb) < 10)
                        {return('green')}
                    else if (10 < Math.abs(cola - colb) && Math.abs(cola - colb) < 40)
                        {return('blue')}
                    else 
                        {return('red')}
                    }()) %>;"> 
                <%= value %>
            </p>
            """
# CL1如果不需要着色，可以用简化的同样式模板
cl1_template="""                
            <p style="margin:0;padding:0;vertical-align:middle;line-height:1.2;"> 
                <%= value %>
            </p>
            """
color_formatter =  HTMLTemplateFormatter(template=common_template)
cl1_formatter = HTMLTemplateFormatter(template=cl1_template)

columns = [TableColumn(field="cola", title="CL1", width = 100, formatter=cl1_formatter),
           TableColumn(field='colb', title='CL2', formatter=color_formatter, width = 100),
           TableColumn(field='colc', title='CL3', formatter=color_formatter, width = 30) # 原宽度5过窄，建议调整适配字符
          ]
data_table = DataTable(source=source,
                       columns=columns,
                       autosize_mode = "force_fit",
                       selectable = True,
                       sortable = True,
                       width=400,height=400)

show(Column(data_table))

如果不想给CL1加格式化器，也可以直接调整着色模板的样式参数，直到和默认列的行高、边距完全匹配即可。

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