为什么用正确的HTMLTemplateFormatter样式化的bokeh数据表中的文本无法正确显示？

Question

我想在bokeh数据表中有一个彩色的矩形。因此，我找到了这些helpful examples。

在四个示例中，我想以稍微修改的方式使用数字4。这是我更改代码的方式：

from bokeh.io import output_notebook, show
output_notebook()
from bokeh.palettes import Spectral

from random import randint
from bokeh.io import output_file, show
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, DateFormatter, 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=['&#9608' for i in range(10)],
#     color=['#00FF00' for i in range(10)]
    color = Spectral[10]
)

source = ColumnDataSource(data)

template="""                
            <p style="color:<%= 
                (function colorfromint(){
                    return(color)
                    }()) %>;"> 
                <%= value %>
            </p>
            """

formatter =  HTMLTemplateFormatter(template=template)

columns = [TableColumn(field="cola", title="CL1", width = 100),
           TableColumn(field='colb', title='CL2', width = 100),
           TableColumn(field='colc', title='CL3', formatter=formatter, width=500),
           TableColumn(field='color', title='CL4')
          ]
data_table = DataTable(source=source,
                       columns=columns,
                       fit_columns=True,
                       selectable = True,
                       sortable = True,
                       width=400,height=400)

show(data_table)

现在的问题是，我在自定义样式字段中编写的矩形（或其他文本）未正确显示。在表字段中它偏移到很远，一半被切除。

另一方面，当我在Jupyter笔记本中显示同一张表时，它可以正确显示，如下所示：

我如何更改模板以设置格式并在jupyter笔记本外正确显示bokeh DataTable字段中的文本？换句话说，为什么在bokeh数据表中用自定义HTMLTemplateFormatter设置样式的文本不能在jupyter笔记本外正确显示？

Answer 1

要了解为什么外观如此，使用浏览器的DevTools确实很有帮助。在这种情况下，您使用的是<p>，默认情况下（至少在Google Chrome浏览器中）此页边距。只需将p标记与span标记放置。