Python dataframe HTML 在 jupyter 外显示

Question

我想创建一个包含数据框的 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')

渲染很简单table，没有 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 吗？

Answer 1

Jupyter CSS 风格 sheet 是美丽的原因 table。您可以从Jupyter 的index.css 文件中复制相关的css 规则。在制作样式 sheet 后，将 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>

这是精心制作的样式 sheet 以及您的示例输出：

/* 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>

Python dataframe HTML 在 jupyter 外显示

Python dataframe HTML display outside jupyter

html

python

html-table

pandas

display