Python数据框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')

渲染是一个没有 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 样式表是漂亮表格的原因。 您可以从 Jupyter 的index.css 文件中复制相关的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>