在 Jupyter Notebook 中格式化 HTML 表格

Question

我有一个 Jupyter 笔记本 python 单元，我试图在 HTML 格式的表格中显示一些输出。我似乎无法删除内部单元格周围的边框线。

这是我生成的 HTML：

<html><style>
    table {border-style: solid; border-color: DodgerBlue;}
    .cp {background-color:DarkGreen; border-collapse:collapse;text-align:center;}
    .cf {background-color:DarkRed; border-collapse:collapse;text-align:center;}
</style>
<table>
<caption>Automaton 1 Evaluation</caption>
<caption style="background-color:DodgerBlue;">State Seen At Step</caption>
<thead style="background-color:DodgerBlue;"> 
    <tr><th>Trace #</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr></thead>
<tbody>
    <tr><td style="text-align:center;">0</td><td  class="cp">1</td><td  class="cf">3</td><td  class="cf">3</td><td  class="cf">3</td><td  class="cf">3</td></tr>
    <tr><td style="text-align:center;">1</td><td  class="cp">1</td><td  class="cp">0</td><td  class="cp">1</td><td  class="cp">1</td><td  class="cp">0</td></tr>
    <tr><td style="text-align:center;">2</td><td  class="cp">1</td><td  class="cp">0</td><td  class="cp">1</td><td  class="cp">0</td><td  class="cp">0</td></tr>
    <tr><td style="text-align:center;">3</td><td  class="cp">1</td><td >2</td><td  class="cp">0</td><td  class="cp">1</td><td >2</td></tr>
    <tr><td style="text-align:center;">4</td><td  class="cp">1</td><td >2</td><td  class="cp">1</td><td >2</td><td >2</td></tr>
</tbody>
</table></html>

我使用以下方法将其显示在单元格中：

from IPython.display import HTML, display
tbl1 = auto1.traceListHTML(auto1.traceLog,title=f'Automaton 1 Evaluation')
tbl2 = auto2.traceListHTML(auto2.traceLog,title=f'Automaton 2 Evaluation')

box_layout = Layout(display='flex',
                    flex_flow='row',
                    justify_content='space-around',
                    width='450px'
                   )

#display(HTML(tbl1))
hbox1 = widgets.Box(children=[widgets.HTML(tbl1),widgets.HTML(tbl2)], layout=box_layout)
display(hbox1)

其中 auto1.traceListHTML 生成上述 HTML 代码。

我得到的是：

我正在努力消除内部细胞之间的细线。即使我将 border-style: Solid 添加到我的 .cp 和 .cf 样式中，那些细黑线仍然如此：

.cf {background-color:DarkRed; border-collapse:collapse;text-align:center; border-style: solid}

我想知道这是否是 IPython 的问题。

Answer 1

这不太有效，但你没有提供一个最小的、可重现的示例，我认为我的示例可以：

单元#1 内容：

# I added the `<table cellspacing="0" cellpadding="0">` from https://stackoverflow.com/a/71657476/8508004
s='''<html><style>
    table {border-style: solid; border-color: DodgerBlue;}
    .cp {background-color:DarkGreen; text-align:center;}
    .cf {background-color:DarkRed; text-align:center;}
</style>
<table cellspacing="0" cellpadding="0">
<caption>Automaton 1 Evaluation</caption>
<caption style="background-color:DodgerBlue;">State Seen At Step</caption>
<thead style="background-color:DodgerBlue;"> 
    <tr><th>Trace #</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr></thead>
<tbody>
    <tr><td style="text-align:center;">0</td><td  class="cp">1</td><td  class="cf">3</td><td  class="cf">3</td><td  class="cf">3</td><td  class="cf">3</td></tr>
    <tr><td style="text-align:center;">1</td><td  class="cp">1</td><td  class="cp">0</td><td  class="cp">1</td><td  class="cp">1</td><td  class="cp">0</td></tr>
    <tr><td style="text-align:center;">2</td><td  class="cp">1</td><td  class="cp">0</td><td  class="cp">1</td><td  class="cp">0</td><td  class="cp">0</td></tr>
    <tr><td style="text-align:center;">3</td><td  class="cp">1</td><td >2</td><td  class="cp">0</td><td  class="cp">1</td><td >2</td></tr>
    <tr><td style="text-align:center;">4</td><td  class="cp">1</td><td >2</td><td  class="cp">1</td><td >2</td><td >2</td></tr>
</tbody>
</table></html>'''

单元#2 内容：

from IPython.display import HTML, display
from ipywidgets import widgets, Layout, HTML
tbl1 = s
tbl2 = s

box_layout = Layout(display='flex',
                    flex_flow='row',
                    justify_content='space-around',
                    width='450px'
                   )

#display(HTML(tbl1))
hbox1 = widgets.Box(children=[widgets.HTML(tbl1),widgets.HTML(tbl2)], layout=box_layout)
display(hbox1)

结果：

关键是我从

这里

添加了<table cellspacing="0" cellpadding="0">，但您可能希望表格本身有边框？所以这就是为什么我认为它不完整。

在 Jupyter Notebook 中格式化 HTML 表格

问题描述投票：0回答：1

1个回答

单元#1 内容：

单元#2 内容：

最新问题

在 Jupyter Notebook 中格式化 HTML 表格

问题描述 投票：0回答：1

1个回答

单元#1 内容：

单元#2 内容：

最新问题

问题描述投票：0回答：1