Jupyter Notebook中HTML表格格式化：移除内部单元格边框

问题说明 #

在Jupyter Notebook中通过ipywidgets展示自定义HTML表格时，内部单元格始终存在无法移除的细边框线，即使给单元格类添加边框样式也无效。

原因分析 #

1. border-collapse: collapse属性被错误应用在单元格类上，该属性需作用于<table>元素才能实现边框合并
2. Jupyter Notebook的默认CSS样式会给表格单元格（<th>、<td>）添加默认边框，需要显式覆盖

解决方案 #

调整CSS样式规则：

• 将border-collapse: collapse移至<table>的样式定义中
• 显式设置所有<th>和<td>的边框为none，彻底移除内部边框
• 保留表格的外层边框样式

修改后的HTML代码示例 #

<html><style>
    table {
        border-style: solid; 
        border-color: DodgerBlue;
        border-collapse: collapse; /* 移到table上实现边框合并 */
    }
    /* 覆盖默认样式，移除所有单元格内部边框 */
    th, td {
        border: none;
    }
    .cp {
        background-color: DarkGreen; 
        text-align: center;
    }
    .cf {
        background-color: DarkRed; 
        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
import ipywidgets as widgets
from ipywidgets import Layout

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'
                   )

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

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