python - Python数据框HTML显示在jupyter之外
问题描述
我想创建一个包含数据框的 HTML 文件(比如“my_file.html”),并且我想有一个类似于 Jupyter 的数据框的渲染,即
from IPython.display import display
from pandas import Timestamp
df = pd.DataFrame({'new': {Timestamp('2008-09-01 00:00:00'): 0.0,
Timestamp('2008-09-02 00:00:00'): -0.0},
'old': {Timestamp('2008-09-01 00:00:00'): 0.0,
Timestamp('2008-09-02 00:00:00'): -0.0},
'diff':{Timestamp('2008-09-01 00:00:00'): 0.0,
Timestamp('2008-09-02 00:00:00'): 0.0}})
display(df)
但是当我这样做时
df.to_html('my_file.html')
渲染是一个没有 Jupyter 格式的简单表格
<div>
<style scoped>
.dataframe tbody tr th:only-of-type {
vertical-align: middle;
}
.dataframe tbody tr th {
vertical-align: top;
}
.dataframe thead th {
text-align: right;
}
</style>
<table border="1" class="dataframe">
<thead>
<tr style="text-align: center;">
<th></th>
<th>new</th>
<th>old</th>
<th>diff</th>
</tr>
</thead>
<tbody>
<tr>
<th>2008-09-01</th>
<td>0.0000</td>
<td>0.0000</td>
<td>0.0000</td>
</tr>
<tr>
<th>2008-09-02</th>
<td>-0.0000</td>
<td>-0.0000</td>
<td>0.0000</td>
</tr>
</tbody>
</table>
</div>
知道如何修改代码以使显示类似于 Jupyter 吗?
解决方案
Jupyter CSS 样式表是漂亮表格的原因。您可以从Jupyter 的文件中复制相关css
规则。index.css
制作完样式表后,将输出包装df.to_html()
在一个<div>
.
<div class="p-Widget jp-RenderedHTMLCommon jp-RenderedHTML jp-mod-trusted jp-OutputArea-output" data-mime-type="text/html">
<!-- Output of df.to_html() -->
</div>
这是带有示例输出的精心制作的样式表:
/* jupyterlab/packages/theme-light-extension/style/variables.css */
:root {
--jp-ui-font-color0: rgba(0, 0, 0, 1);
--jp-ui-font-color1: rgba(0, 0, 0, 0.87);
--jp-layout-color0: white;
--jp-rendermime-error-background: #fdd;
--jp-rendermime-table-row-background: #ddd;
--jp-rendermime-table-row-hover-background: #aaa;
}
/* Tables */
.jp-RenderedHTMLCommon table {
border-collapse: collapse;
border-spacing: 0;
border: none;
color: var(--jp-ui-font-color1);
font-size: 12px;
table-layout: fixed;
margin-left: auto;
margin-right: auto;
}
.jp-RenderedHTMLCommon thead {
border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
vertical-align: bottom;
}
.jp-RenderedHTMLCommon td,
.jp-RenderedHTMLCommon th,
.jp-RenderedHTMLCommon tr {
vertical-align: middle;
padding: 0.5em 0.5em;
line-height: normal;
white-space: normal;
max-width: none;
border: none;
}
.jp-RenderedMarkdown.jp-RenderedHTMLCommon td,
.jp-RenderedMarkdown.jp-RenderedHTMLCommon th {
max-width: none;
}
:not(.jp-RenderedMarkdown).jp-RenderedHTMLCommon td,
:not(.jp-RenderedMarkdown).jp-RenderedHTMLCommon th,
:not(.jp-RenderedMarkdown).jp-RenderedHTMLCommon tr {
text-align: right;
}
.jp-RenderedHTMLCommon th {
font-weight: bold;
}
.jp-RenderedHTMLCommon tbody tr:nth-child(odd) {
background: var(--jp-layout-color0);
}
.jp-RenderedHTMLCommon tbody tr:nth-child(even) {
background: var(--jp-rendermime-table-row-background);
}
.jp-RenderedHTMLCommon tbody tr:hover {
background: var(--jp-rendermime-table-row-hover-background);
}
.jp-RenderedHTMLCommon table {
margin-bottom: 1em;
}
.jp-RenderedHTMLCommon p {
text-align: left;
margin: 0px;
}
.jp-RenderedHTMLCommon p {
margin-bottom: 1em;
}
<div class="p-Widget jp-RenderedHTMLCommon jp-RenderedHTML jp-mod-trusted jp-OutputArea-output" data-mime-type="text/html">
<style scoped="">
.dataframe tbody tr th:only-of-type {
vertical-align: middle;
}
.dataframe tbody tr th {
vertical-align: top;
}
.dataframe thead th {
text-align: right;
}
</style>
<table class="dataframe" border="1">
<thead>
<tr style="text-align: right;">
<th></th>
<th>new</th>
<th>old</th>
<th>diff</th>
</tr>
</thead>
<tbody>
<tr>
<th>2008-09-01</th>
<td>0.0</td>
<td>0.0</td>
<td>0.0</td>
</tr>
<tr>
<th>2008-09-02</th>
<td>-0.0</td>
<td>-0.0</td>
<td>0.0</td>
</tr>
</tbody>
</table>
</div>
推荐阅读
- powerpoint - 尝试使用从 Windows 服务的 VBA 调用的 PowerPoint 时出错
- python-3.x - 使用 jupyter notebook 配置 pyspark 的方法
- excel - 找到 TEAM 对最高位置(降低数字)
- python - 格式化十六进制以打印 2 位数字?
- angular - 配置为不时自定义 Angular FormField 发射事件
- javascript - 如何捕获/处理 HtmlUnit 中的客户端 window.location 更改?
- reactjs - 组件正在使用 UseState 在 ReactJS 中更改要控制的文本类型的不受控制的输入
- microsoft-edge - Chromium Edge 扩展发布 API
- javascript - 为什么此 JavaScript 代码打印函数代码而不是返回值
- python - 用于 Python 问题的雪花连接器